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 指南。