[英]Angular ng-container inside a HTML table row
I have a Reactive Form with FormArray (like an Game Roster with basic information like Start At, Prize, Duration and also with a Roster (array of players)我有一个带有 FormArray 的反应式表单(比如一个包含基本信息的游戏花名册,如开始时间、奖品、持续时间以及花名册(玩家数组)
I display array of players like this:我显示这样的玩家数组:
<input
class="form-control"
formControlName="prize"
type="number"
/>
<table>
<tr
*ngFor="let player of form.players"
[form]="player"
appPlayer
>
</tr>
<table>
And custom component和自定义组件
@Component({
selector: 'tr[appPlayer]',
templateUrl: './player.component.html',
changeDetection: ChangeDetectionStrategy.Default,
providers: [
ReceiptItemReactiveService
]
})
export class AppPlayerRow {
@Input()
player: FormGroup;
...
So far so good.到目前为止,一切都很好。 Inside AppPlayerRow I need display cells, indeed.
在 AppPlayerRow 中,我确实需要显示单元格。 Though, they must be wrapped inside an element with [FormGroup] directive.
但是,它们必须用 [FormGroup] 指令包裹在元素中。 As far as I know HTML5 allows only td/th element inside TR.
据我所知,HTML5 只允许 TR 内的第 td/th 元素。 So I did it with this workaround:
所以我用这个解决方法做到了:
player.component.html: player.component.html:
<ng-container [formGroup]="player" >
<td class="order" >
{{ plater.controls.order?.value }}
</td>
<td class="desc" >
<input
class="form-control"
formControlName="name"
/>
....
In browser all is rednered good, ng-container is not rendered, everything seems to be valid.在浏览器中,一切都很好,ng-container 没有呈现,一切似乎都是有效的。 I am just trying to confirm if I am not missing some caveat.
我只是想确认我是否没有遗漏一些警告。
Thansk!谢谢!
It is totally okay to use the <ng-container>
, however, the container just helps you to increase the context in which you use Angular directives.使用
<ng-container>
完全没问题,但是,容器只是帮助您增加使用 Angular 指令的上下文。 More like you could have a *ngFor
directive in the outer context and still use *ngIf
in the looped *ngFor
by using the ng-container to group elements when there is no suitable host element for the directive.更像是您可以在外部上下文中有一个
*ngFor
指令,并且在没有适合该指令的宿主元素时使用 ng-container 在循环的*ngFor
中使用*ngIf
ngIf 来对元素进行分组。 Refer to the Angular Guide .请参阅Angular 指南。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.