Angular数组项更新时防止重渲染：修改*ngFor列表项后闪屏且数据重置如何解决

问题根因 #

• *ngFor默认跟踪逻辑缺陷：Angular 的*ngFor默认通过对象引用判断列表条目是否需要更新，你在handleReqData中使用{...data}生成了全新对象覆盖数组原有项，导致对应数组项的引用地址发生变化，*ngFor会判定该条目已失效，触发旧子组件销毁、新子组件创建的流程，大量组件重建就会出现明显闪屏。
• 子组件无初始值绑定：你当前写法中requirement-field没有绑定输入属性来接收父组件存储的字段数据，子组件被销毁重建后，新实例只会加载默认初始值，和数组中存储的最新数据不匹配。

解决方案 #

方案1：修改数组更新逻辑（优先推荐）

不需要生成新对象覆盖数组项，直接修改原有对象的属性即可，保持引用不变，不会触发子组件重建：

handleReqData(i: number, data: IRequirementField) {
  Object.assign(this.requirement.requirementFields[i], data);
}

方案2：添加trackBy自定义跟踪规则

如果业务逻辑需要生成新对象（比如需要触发依赖引用变更的副作用），可以给*ngFor配置trackBy函数，让Angular根据业务唯一标识而非对象引用跟踪条目：
首先在父组件中定义trackBy方法：

trackByFieldId(index: number, field: IRequirementField) {
  // 优先用字段的唯一业务ID，无唯一ID时可临时用index（数组频繁增删时不推荐）
  return field.id ?? index;
}

然后修改模板中的*ngFor声明：

<div *ngFor="let field of requirement.requirementFields; let i = index; trackBy: trackByFieldId">
  <requirement-field (data)="handleReqData(i, $event)"></requirement-field>
</div>

补充优化

建议给requirement-field添加@Input() field: IRequirementField输入属性，在模板中绑定[field]="field"，确保子组件意外重建时能拿到最新的初始值，彻底避免数据不一致问题。

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