将 ngFor 索引绑定到 Formcontrol Id答案

【问题标题】：Bind the ngFor index to Formcontrol Id将 ngFor 索引绑定到 Formcontrol Id
【发布时间】：2018-06-30 10:59:05
【问题描述】：

当组件启动或添加新行时，我正在尝试将ngFor 索引绑定到输入FormControlName。

<tr *ngFor="let item of invForm.controls.tool.controls; let i= index" [formGroupName]="i" >
    <td>
        <mat-form-field floatLabel='never'>
            <input matInput type="number" style="text-align: right" formControlName="Id"  value="{{i+1}}" >
        </mat-form-field>
    </td>
</tr>

我做了整个例子，请看一下id没有从输入中自动获取值。

https://stackblitz.com/edit/invoice-id

经过大量研究，我找到了trackBy: trackByFn 的简单解决方案。

<tr *ngFor="let item of invForm.controls.tool.controls; let i= index ;trackBy: trackByFn" [formGroupName]="i"  >

和

trackByFn(index, item) {

     item.value.Id = index+1
    return index; 
  }

【问题讨论】：

标签： angular ngfor formarray

【解决方案1】：

您的初始值设置不被视为更改/输入，因此不会更新您的 FormControl 上的值。如果您根据数组的长度确定 id，则可以将其传递给 add 函数并从 html 中删除 value="{{i+1}}"：

constructor(private formBuilder: FormBuilder) {
    this.invForm = this.formBuilder.group({
        tool: this.formBuilder.array([this.addEqp(1) ])
    });
}

addEqp(id: number) {
    const group =  this.formBuilder.group({
        Id: [id],
        qnt: [''],
        description: [''],
        price: [''],
        total: ['']
    });
    return group;
}

addEquip() {

    const control: FormArray = this.invForm.get(`tool`) as FormArray;
    control.push(this.addEqp(control.length + 1));
}

【讨论】：

非常感谢您的回答。这是工作，但我需要一个更动态的 id，如果我添加 3 行并删除第二行，新行的下一个 id 将像最后一个一样为 3。