Angular表单新增删除行异常：删首行后新增致输入框数据清空

这个问题我太熟悉了——本质是Angular的*ngFor默认用**循环索引(index)**作为追踪标识，再加上你的输入框name属性依赖于index，导致数组元素位置变化后，视图和ngModel的绑定关系彻底混乱了。

具体为什么会出现这个现象？ #

当你删除第一行后：

1. 原来的第二行（index=1）变成了新的index=0，第三行（index=2）变成index=1
2. Angular的ngModel是通过输入框的name属性来关联表单控件的，此时新的index对应的name="piEmail0"会和原来第一行的控件绑定关系混淆
3. 结果就是视图上输入框显示清空，但你的partners数组里的数据其实还在——因为模型本身没被修改，只是视图绑定错了控件。

两步解决问题： #

1. 给*ngFor添加trackBy函数

让Angular基于每个Partner实例的唯一标识来追踪元素，而不是依赖易变的index。

首先在你的组件类里添加这个函数：

// 假设你的Partner类可以添加一个唯一id属性，比如在创建时赋值
trackByPartnerId(index: number, partner: Partner): number {
  return partner.id; // 用每个Partner的唯一id作为追踪标识
}

// 如果你的Partner类原本没有id，修改add方法给新实例加唯一标识：
addAnotherPartner() {
  const newPartner = new Partner();
  newPartner.id = Date.now(); // 用时间戳做临时唯一id，也可以用uuid库生成更可靠的id
  this.partners.push(newPartner);
}

2. 修改输入框的name属性

把依赖index的name="piEmail{{x}}"改成依赖Partner的唯一id，确保每个输入框的name永远和对应的实例绑定：

<input matInput placeholder="email" 
       [name]="'piEmail'+item.id" 
       #piEmail="ngModel" 
       [(ngModel)]="item.email" >

3. 更新模板里的*ngFor

加上trackBy指令：

<div class="row" *ngFor="let item of partners;let x = index; trackBy: trackByPartnerId">

为什么这样能解决问题？ #

• trackBy让Angular准确识别数组中的每个元素，当数组元素位置变化时，Angular只会更新实际变化的DOM元素，不会重新渲染整个列表，避免了视图和模型的错位。
• 基于唯一id的name属性，确保每个ngModel控件永远和对应的Partner实例绑定，不会因为index变化而混淆绑定关系。

现在再测试一下：删除第一行后点击新增，原来第二、第三行的输入框数据会正常保留，模型和视图也能保持同步啦。

内容的提问来源于stack exchange，提问作者hessam zaheri