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

看，您的Array未正确初始化为这样工作：

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会抛出您在控制台中看到的错误。尝试以与product.productNutrient数组一样多的成员实例化nutrients数组，如下所示：

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.

形式为

1 个答案: