HTML 表行内的 Angular ng-container

Question

我有一个带有 FormArray 的反应式表单（比如一个包含基本信息的游戏花名册，如开始时间、奖品、持续时间以及花名册（玩家数组）

我显示这样的玩家数组：

<input 
    class="form-control" 
    formControlName="prize"
    type="number"
/>

<table>
 <tr 
   *ngFor="let player of form.players" 
   [form]="player"
   appPlayer 
 >
 </tr>
<table>

和自定义组件

@Component({
  selector: 'tr[appPlayer]',
  templateUrl: './player.component.html',
  changeDetection: ChangeDetectionStrategy.Default,
  providers: [
    ReceiptItemReactiveService
  ]
})
export class AppPlayerRow {
  @Input()
  player: FormGroup;
...

到目前为止，一切都很好。 在 AppPlayerRow 中，我确实需要显示单元格。 但是，它们必须用 [FormGroup] 指令包裹在元素中。 据我所知，HTML5 只允许 TR 内的第 td/th 元素。 所以我用这个解决方法做到了：

player.component.html：

<ng-container [formGroup]="player" >
    <td class="order" >
        {{ plater.controls.order?.value }}
    </td>

    <td class="desc" >
        <input 
            class="form-control" 
            formControlName="name"
        />
   ....

在浏览器中，一切都很好，ng-container 没有呈现，一切似乎都是有效的。 我只是想确认我是否没有遗漏一些警告。

谢谢！

Answer 1

使用<ng-container>完全没问题，但是，容器只是帮助您增加使用 Angular 指令的上下文。 更像是您可以在外部上下文中有一个*ngFor指令，并且在没有适合该指令的宿主元素时使用 ng-container 在循环的*ngFor中使用*ngIf ngIf 来对元素进行分组。 请参阅Angular 指南。