Angular项目ngFor循环中file-dropper上传文件index索引错误如何解决

• 核心原因是*ngFor未配置trackBy函数，Angular默认使用对象引用作为节点重绘的判断依据，你动态修改表单类型、添加表单项时，Angular会错误复用已有的DOM节点，导致所有file-dropper组件绑定的索引参数都被覆盖为第一个图片项的索引。
• 次要排查点：你封装的file-dropper组件如果内部使用了全局选择器绑定事件（比如直接用document查找文件输入框），或者多个组件实例共享了同一个EventEmitter，也会导致所有上传事件都触发第一个实例的回调。

1. 给ngFor添加trackBy函数 #

首先在组件TS代码中新增trackBy方法：

import { AbstractControl } from '@angular/forms';

// ...类内部代码
trackByContent(index: number, item: AbstractControl): number {
  // 若表单项有唯一业务ID优先用ID，无唯一标识可先用index
  return index;
}

修改HTML中的ngFor声明，绑定trackBy函数：

<div *ngFor="let subContent of chapterContent.controls; let indexed = index; trackBy: trackByContent" [formGroupName]="indexed">

2. 检查file-dropper组件逻辑 #

确认组件满足以下要求：

• 事件监听都绑定在当前组件内部的DOM元素上，使用ViewChild获取当前实例的文件输入框、拖拽区域，不要用全局选择器查找元素。
• 每个组件实例单独初始化@Output() file = new EventEmitter<File>()，不要共享同一个EventEmitter实例。

修复完成后重新测试，每个上传区域触发回调时就会返回对应位置的正确索引。

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