Angular 4表单数组绑定报错：Cannot read property 'amount' of undefined

这个报错的核心原因很清晰：你虽然初始化了product.productNutrient为一个空数组，但当*ngFor循环nutrients数组时，product.productNutrient[i]对应的位置没有实际的ProductNutrient实例，直接访问它的amount属性自然会抛出“无法读取undefined的属性”错误。

修复步骤： #

1. 提前初始化product.productNutrient数组的元素
   在组件中，当你拿到nutrients数据后（不管是API接口返回还是本地静态数据），需要为每个nutrient项创建对应的ProductNutrient实例，填充到product.productNutrient数组中。

   举个例子，如果nutrients是通过API获取的，修改组件代码如下：

   ngOnInit() {
     // 假设你从API接口获取营养成分数据
     this.api.getNutrients().subscribe(nutrients => {
       this.nutrients = nutrients;
       // 为每个营养成分创建ProductNutrient实例，关联对应的nutrientId
       this.product.productNutrient = nutrients.map(nutrient => {
         return new ProductNutrient(nutrient.nutrientId);
       });
     });
   }
   

   如果nutrients是本地静态数据，直接在ngOnInit中初始化：

   ngOnInit() {
     this.product.productNutrient = this.nutrients.map(nutrient => 
       new ProductNutrient(nutrient.nutrientId)
     );
   }
   

2. 验证模板绑定
   完成初始化后，模板中的[(ngModel)]="product.productNutrient[i].amount"就能正常工作了——每个索引i对应的位置都有一个ProductNutrient实例，amount属性存在（即使初始值为undefined，Angular也能正确处理双向绑定）。

额外鲁棒性优化（可选） #

如果担心数据加载时机的问题，还可以在模板中加入空值保护（不过前面的初始化方案已经从根源解决了问题，这一步属于锦上添花）：

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

这样修改后，表单中的值就能正确存入this.product.productNutrient数组，报错也会彻底消失。

内容的提问来源于stack exchange，提问作者Mees Kluivers