Angular数组更新后数据绑定失效问题求助

这个问题的核心在于Angular表单控件的追踪机制和*ngFor默认的项识别方式冲突了。让我拆解一下原因，再给你具体的修复方案：

问题根源 #

你当前用Name-{{i}}作为输入框的name属性，同时*ngFor默认依赖数组项的引用和索引来识别元素。当你删除第3项后，原来第4、5项的索引会变成3、4，对应的name属性也会从Name-4、Name-5变成Name-3、Name-4。Angular会认为这是全新的表单控件，从而重新创建它们，导致之前输入的内容在界面上消失——但实际上数组里的Thought对象数据并没有丢失，只是控件和数据的绑定被重新初始化了。

修复方案：使用稳定的追踪标识 #

我们需要给每个Thought对象添加唯一且稳定的ID，让*ngFor和表单控件都基于这个ID来识别项，而不是易变的索引。

步骤1：给Thought类添加唯一ID #

修改你的Thought类，增加一个id属性来存储唯一标识：

export class Thought {
  id: string; // 新增唯一ID
  Name: string;
  Description: string;
}

步骤2：添加Thought时生成唯一ID #

在组件的addThought方法里，利用你已有的Guid服务给新创建的Thought生成ID：

addThought() {
  let thought: Thought = new Thought;
  thought.id = this.guid.generate(); // 生成唯一ID
  this.myObject.Thoughts.push(thought);
}

步骤3：给*ngFor添加trackBy函数 #

在组件类中添加一个trackBy函数，让*ngFor通过id来追踪数组项：

trackByThoughtId(index: number, thought: Thought): string {
  return thought.id; // 返回唯一ID作为追踪标识
}

然后修改模板中的*ngFor指令，指定trackBy：

<div class="Thought" *ngFor="let Thought of myObject.Thoughts;let i=index; trackBy: trackByThoughtId">

步骤4：用稳定的ID作为表单控件的name属性 #

把输入框的name属性从依赖索引改为依赖Thought的id，确保name值不会因为数组项的位置变化而改变，同时修正模板变量的语法错误（Angular不允许用对象属性作为模板变量名）：

Thought Name:<input name="Name-{{Thought.id}}" [(ngModel)]=Thought.Name #thoughtName="ngModel" type="Text" /><br>
Thought Description:<input name="Description-{{Thought.id}}" [(ngModel)]=Thought.Description #thoughtDescription="ngModel" type="Text" />

验证效果 #

现在你再测试流程：

1. 添加5个Thought并输入内容
2. 删除第3项
3. 新增一个Thought
   此时原来第5项的输入框内容会正常保留，控制台打印的数组数据也和界面一致。

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