Angular输入框列表绑定动态[*ngModel]出现0 undefined报错如何解决？

问题根因 #

你遇到的0 is undefined报错由ngModel绑定逻辑错误导致：
你在模板中写的fruit.name[i]会尝试读取当前fruit对象下name属性的第i个元素，但你的fruit对象中既不存在名为name的数组属性，初始定义的name1属性也不符合通用的列表项结构，读取不存在的属性的下标自然会抛出未定义错误。

修复方案 #

1. 调整TS代码 #

统一列表项的对象结构，同时实现addNewInput方法，每次点击向数组追加新的空对象触发列表重渲染：

// 定义明确的类型避免后续类型错误，不需要用any
fruits: {name: string}[] = [
  {
    name: 'Apple'
  }
]

addNewInput() {
  this.fruits.push({ name: '' })
}

2. 调整模板绑定 #

循环中直接绑定当前项的name属性即可，不需要额外加索引：

<div *ngFor="let fruit of fruits; let i = index">
  <input type="text" [(ngModel)]="fruit.name" />
</div>
<button (click)="addNewInput()">Add new fruit</button>

如果你确实有需要给每个对象的属性名加上数字后缀的特殊需求，可以改用fruit['name' + i]的动态属性写法，但不推荐该用法，统一属性名的结构维护成本更低。

内容的提问来源于stack exchange，提问作者Joker Bench