Angular 5项目中FormArray显示重复错误数据问题求助

嗨，我来帮你排查这个FormArray显示重复值的问题！这种所有行都显示同一个值（DEPT3）的情况，大概率是初始化FormArray时重复引用了同一个控件实例，或者模板绑定没对应到正确的数组项，我给你拆解下常见问题和解决方法：

很多人会在初始化FormArray时犯这个错——循环里复用同一个FormControl，导致所有数组项都绑定到同一个控件上，最后一次赋值的内容会覆盖所有显示。

错误示例（你可能踩了这个坑） #

// 错误：所有includeCode项都用同一个FormControl
let deptControl = new FormControl('');
this.unitForm = this.fb.group({
  id: [unit.id],
  name: [unit.name],
  desc: [unit.desc],
  includeCode: this.fb.array([])
});

const includeCodeArray = this.unitForm.get('includeCode') as FormArray;
unit.includeCode.forEach(dept => {
  deptControl.setValue(dept);
  includeCodeArray.push(deptControl); // 每次都push同一个控件实例！
});

这种写法里，不管循环多少次，推到数组里的都是同一个deptControl对象，最后一次赋值的DEPT3就会变成所有行的显示值。

正确的初始化方式 #

每次循环都创建新的FormControl实例，确保每个数组项绑定独立的控件：

// 方法1：用map快速生成FormArray
this.unitForm = this.fb.group({
  id: [unit.id],
  name: [unit.name],
  desc: [unit.desc],
  includeCode: this.fb.array(
    unit.includeCode.map(dept => new FormControl(dept))
  )
});

// 方法2：forEach循环中新建控件
const includeCodeArray = this.unitForm.get('includeCode') as FormArray;
unit.includeCode.forEach(dept => {
  includeCodeArray.push(this.fb.control(dept)); // 每次循环都新建控件
});

如果模板里没有正确绑定FormArray的对应索引，也会导致所有行显示同一个值。

错误示例 #

<!-- 错误：所有行都绑定到索引0的控件 -->
<div formArrayName="includeCode">
  <div *ngFor="let dept of includeCodeArray.controls">
    <input formControlName="0">
  </div>
</div>

正确的模板写法 #

在*ngFor中获取索引，绑定到对应位置的控件：

<div formArrayName="includeCode">
  <div *ngFor="let dept of includeCodeArray.controls; let i = index">
    <!-- 方式1：用索引绑定 -->
    <input [formControlName]="i">
    <!-- 方式2：直接绑定当前控件 -->
    <!-- <input [formControl]="dept"> -->
  </div>
</div>

同时要确保组件里正确暴露FormArray的引用：

// 组件中定义getter，方便模板调用
get includeCodeArray() {
  return this.unitForm.get('includeCode') as FormArray;
}

1. 先确认从数据库拿到的unit.includeCode确实是包含不同值的数组（比如["DEPT1", "DEPT2", "DEPT3"]），可以用console.log(unit.includeCode)验证。
2. 如果includeCode是对象数组而非字符串数组，要改用FormGroup，同样要保证每次循环新建独立的FormGroup实例。

按照上面的步骤调整，应该就能解决所有行显示相同值的问题啦！

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