angular - 将 ngFor 索引绑定到 Formcontrol Id

Question

当组件启动或添加新行时，我正在尝试将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; 
  } 

Answer 1

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

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));
}

`