Angular 5.2中数组操作引发异常渲染问题求助

嘿，这个问题我太熟悉了——这是Angular里*ngFor默认跟踪策略引发的常见坑！我来给你拆解原因，再给出靠谱的解决方案：

问题根源 #

Angular的*ngFor默认用对象引用来跟踪数组元素。当你用splice(index, 1)删除中间条目后，数组后面元素的索引会往前移；接着添加新条目时，Angular会错误地复用之前已存在的DOM节点（因为它以为是同一个“引用”对应的元素），再加上你用index作为输入框的name属性值，索引变化会导致ngModel的绑定逻辑混乱，最终出现“删除后添加的条目无值显示”的异常。

两步解决问题 #

1. 给*ngFor添加trackBy函数，指定唯一跟踪标识 #

首先，我们要给每个条目加一个唯一不变的ID（不能用会变化的索引），让Angular能准确识别每个元素：

修改组件里的数组和方法：

// 初始化条目，给每个item添加唯一id
items = [ 
  {id: 1, project_id: 'a'}, 
  {id: 2, project_id: 'b'}, 
  {id: 3, project_id: 'c'} 
];

// 添加新条目时生成唯一id
newItem(e) { 
  e.preventDefault(); 
  // 生成自增的唯一id，也可以用时间戳、UUID等方式
  const maxId = items.length ? Math.max(...items.map(item => item.id)) : 0;
  items = [...items, {id: maxId + 1, project_id: ''}]; 
}

// 定义trackBy函数，返回item的唯一id
trackByItemId(index: number, item: any): number {
  return item.id;
}

修改模板里的*ngFor：

<div class="fields" *ngFor="let item of items; index as i; trackBy: trackByItemId;">

2. 替换输入框的name属性，用唯一ID代替索引 #

原来用'project' + i作为name，索引变化后会导致输入框的name重复或错乱，我们换成item的唯一id：

<input type="text" [(ngModel)]="item.project_id" [name]="'project' + item.id" placeholder="Project ID">

为什么这样有效？ #

• trackBy函数告诉Angular：用item的id来判断元素是否唯一，而不是默认的对象引用或索引。这样数组变化时，Angular只会创建/销毁真正新增/删除的元素对应的DOM，不会复用旧节点，绑定逻辑就不会乱。
• 用唯一id作为name，确保每个输入框的name属性始终唯一且稳定，符合Angular表单控件的要求，彻底避免索引变化带来的绑定冲突。

现在你再测试一下：删除第二个条目后点击添加新条目，所有条目都会正常渲染，不会出现空值的情况啦！

内容的提问来源于stack exchange，提问作者MD. Jahidul Islam