HTML表格行内的Angular ng-container答案

【问题标题】：Angular ng-container inside a HTML table rowHTML表格行内的Angular ng-container
【发布时间】：2020-07-24 11:00:10
【问题描述】：

我有一个带有 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 没有渲染，一切似乎都是有效的。我只是想确认我是否没有遗漏一些警告。

谢谢！

【问题讨论】：

实际上最好像这样在组件中使用 td 而不是 tr，通常如果您只是尝试在不同的组件中使用 tr，那么您可能会遇到问题，但这完全没问题。
您是否在任何其他情况下使用appPlayer？如果没有，您可以只使用selector: [appPlayer] 来简化选择器。

标签： html angular angular-reactive-forms

【解决方案1】：

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

【讨论】：