Angular 4 数组形式

Question

我正在使用一组值构建我的表单的一部分，如下所示：

         <mat-form-field *ngFor="let item of nutrients; let i = index">
            <input matInput type="text" name="{{item.nutrientId}}" placeholder="{{item.nutrientName}} ({{item.nutrientMeasurement}})..." [(ngModel)]="product.productNutrient[i].amount" #amount="ngModel" />
        </mat-form-field>

product型号：

    constructor(
    public productId?: number,
    public productName?: string,
    public comments?: string,
    public manufacturerName?: string,
    public amount?: number,
    public measurement?: string,
    public isAdded?: boolean,
    public isConfirmed?: boolean,
    public productNutrient?: ProductNutrient[])

product_nutrient型号：

constructor(
    public nutrientId?: number,
    public productId?: number,
    public amount?: number)

我的component.ts:

product: Product = new Product();
constructor(private api: ApiService, private productService: ProductService) {
   this.product.productNutrient = new Array<ProductNutrient>();
}

所以我希望将表单中的值作为数组添加到 this.product.productNutrient。但是，当我现在打开表单时，出现以下错误：

ERROR TypeError: Cannot read property 'amount' of undefined

我的完整表格供参考：

        <form name="addProductForm" #addProductForm="ngForm" (ngSubmit)="addProduct(addProductForm)">

        <mat-form-field>
            <input matInput type="text" name="productName" placeholder="Product naam..." required [(ngModel)]="product.productName" #productName="ngModel" />
        </mat-form-field>

        <mat-form-field>
            <input matInput type="text" name="productDescription" placeholder="Product beschrijving..." [(ngModel)]="product.productDescription" #productDescription="ngModel" />
        </mat-form-field>

        <mat-form-field >
            <input matInput type="text" name="manufacturerName" placeholder="Fabrikant naam..." [(ngModel)]="product.manufacturerName" #manufacurerName="ngModel" />
        </mat-form-field>

        <mat-form-field>
            <input matInput type="text" name="amount" placeholder="Hoeveelheid..." required [(ngModel)]="product.amount" />
        </mat-form-field>

        <mat-form-field>
            <input matInput type="text" name="measurement" placeholder="Meeteenheid..." required [(ngModel)]="product.measurement" #measurement="ngModel" />
        </mat-form-field>

        <mat-form-field>
            <input matInput type="text" name="comments" placeholder="Commentaar..." [(ngModel)]="product.comments" #comments="ngModel" />
        </mat-form-field>

        <mat-form-field *ngFor="let item of nutrients; let i = index">
            <input matInput type="text" name="{{item.nutrientId}}" placeholder="{{item.nutrientName}} ({{item.nutrientMeasurement}})..." [(ngModel)]="product.productNutrient[i].amount" #amount="ngModel" />
        </mat-form-field>

        <button mat-raised-button type="submit" class="secondary-color" [disabled]="!addProductForm.valid">Toevoegen</button>
         <pre>{{addProductForm.value | json}}</pre>
    </form>

Answer 1

你看，你的数组没有正确初始化，无法像这样工作：

this.product.productNutrient = new Array<ProductNutrient>();

这将创建一个空数组：[]。但是在您的模板中，您使用 *ngFor 来呈现使用另一个名为 nutrients 的数组的输入，该数组（我猜）有多个零项。因此，在渲染阶段，索引 i 的值可以是 2，这意味着

product.productNutrient[i]

未定义。然后你有一个 ngModel:

[(ngModel)]="product.productNutrient[i].amount"

看，product.productNutrient[2] 是 undefined，因为 product.productNutrient 是一个空数组，所以尝试访问 product.productNutrient[2].amount 将抛出您在控制台中看到的错误。尝试以与 nutrients 数组成员一样多的方式实例化您的 product.productNutrient 数组，如下所示：

this.product.productNutrient = this.nutrients.map(nutrient => new ProductNutrient(nutrient.id)); // somewhat speculative code, adjust it so it has the same structure as your models do.

Angular 4 数组形式

Angular 4 array in form

angular-material2

angular

angular-forms