如何将新的`@for`循环语法用于动态表单？

Answer 1

锯齿存在问题，其中

let i = $index;

会消除

$index

，因此无法在轨道上工作：

您可以这样修复它：

 @for (alias of aliases.controls; let i =$index; track i; ) {
    <div>
      <!-- The repeated alias template -->
      <label for="alias-{{ i }}">Alias:</label>
      <input id="alias-{{ i }}" type="text" [formControlName]="i">
    </div>
  }

或者更好的是，你甚至不再需要别名，你可以直接使用模板中隐式的

$index

 @for (alias of aliases.controls; track $index) {
    <div>
      <!-- The repeated alias template -->
      <label for="alias-{{ $index }}">Alias:</label>
      <input id="alias-{{ $index }}" type="text" [formControlName]="$index">
    </div>
  }

Answer 2

您尝试在 Angular 17 中使用新的 @for 循环语法时似乎存在一些混乱。在 Angular 17 中循环遍历表单数组中的表单控件的正确语法如下：

<div formArrayName="aliases">
  <h2>Aliases</h2>
  <button type="button" (click)="addAlias()">+ Add another alias</button>

  <div *ngFor="let alias of aliases.controls; index as i">
    <!-- The repeated alias template -->
    <label for="alias-{{ i }}">Alias:</label>
    <input id="alias-{{ i }}" type="text" [formControl]="alias">
  </div>
</div>

在更新的语法中，您使用 *ngFor 来迭代 aliases.controls 中的表单控件。 let alias 语法允许您在循环中引用当前表单控件，而 index as i 允许您获取索引。然后，您可以使用 [formControl]="alias" 将表单控件绑定到输入。

您尝试的 @for 语法对此用例无效。正确的 Angular 17 语法使用 *ngFor 指令以及当前项和索引的指定变量名称。在这种情况下不需要 trackBy 函数。