为什么不从 FormArray 显示输入

Question

查看此代码：

https://stackblitz.com/edit/angular-usshu2?embed=1&file=src%2Fapp%2Fapp.component.ts&fbclid=IwAR171rBtZZsG3a29coIw9jnZK4rBTRj4Tn5mEFSCwRd4uosD5KaUwobE9Rk

我从字面上复制粘贴了代码，唯一 returns 是保存按钮。

我在控制台中收到此错误：-

错误错误：找不到类型 'object' 的不同支持对象“[object Object]”。 NgFor 仅支持绑定到 Iterables，例如数组。

app.component.ts:

 constructor(private _formBuilder: FormBuilder) {}


ngOnInit(){

this.loanProductForm = this._formBuilder.group({
  products: this._formBuilder.array([this.addProductFormGroup()])
});
 
})
}

addProductFormGroup(): FormGroup {
return this._formBuilder.group({
 productId: ["", Validators.required],
   price: ["", Validators.required],
  
});



}

addProductButtonClick(): void {
(<FormArray>this.loanProductForm.get("products")).push(
  this.addProductFormGroup()
);


}
 getControls(combo){
return combo.get('products').controls;
}

 onSubmit() {
console.log(this.loanProductForm.value)

 }

component.html:

<form class="form-horizontal" [formGroup]="loanProductForm" (ngSubmit)="onSubmit()">
    <table>
        <tr formArrayName="products" *ngFor="let item of loanProductForm.controls; let i = index">
            <div [formGroupName]="i">
                <td>
                    <input type="text" class="form-control" [id]="'productId' + i" placeholder="productId"  formControlName="productId">
                    <div *ngIf="item.get('productId').errors.required &&
                    item.get('productId').touched">
                  ProductId is required
          </div>
                </td>
                <td>
                    <input type="text" class="form-control" [id]="'price' + i" placeholder="price"  formControlName="price">
                    <div *ngIf="item.get('price').errors.required &&
                    item.get('price').touched">
                  price is required
          </div>
                </td>
                <!-- <td>
                    <input type="text" class="form-control" [id]="'loanTermId' + i" placeholder="loanTermId"  formControlName="loanTermId">
       </td>
                <td>
                    <input type="text" class="form-control" [id]="'quantity' + i" placeholder="quantity"  formControlName="quantity">
       </td> -->
                <td>
                    <button type="button" (click)="addProductButtonClick()" >Add</button>
                </td>
            </div>
        </tr>
    </table>
    <input type="submit" value="Save"/>
</form>

Answer 1

FormGroup 在“products”中有数组属性因此您必须将 loanProductForm.controls 更改为 loanProductForm.get('products').controls 以获得 formArray

即

<tr formArrayName="products" *ngFor="let item of loanProductForm.controls; let i = index">

到

<tr formArrayName="products" *ngFor="let item of loanProductForm.get('products').controls; let i = index">

为什么不从 FormArray 显示输入

Why the inputs are not displaying from FormArray

angular

formarray