Angular 4嵌套*ngFor中ngModel绑定异常问题求助

嘿，这个问题我之前也踩过坑！本质是因为相同的问题对象被多个害虫实例共享，当你用ngModel绑定到问题的属性时，所有引用这个对象的地方都会同步更新——毕竟它们指向的是内存里同一个数据实例嘛。

问题根源 #

举个直白的例子：如果害虫A和害虫B都关联了同一个question对象，当你修改A的这个问题答案时，其实是在修改这个共享对象的属性，自然B的对应问题也会跟着变，因为它们绑定的是同一个东西。

解决方案：给每个害虫-问题对维护独立的答案 #

我们需要把答案和“害虫+问题”的组合绑定，而不是直接绑定到共享的问题对象上。具体可以这么做：

1. 在组件中创建独立的答案存储结构

定义一个对象来存储每个害虫对应的各个问题的答案，确保每个组合都有独立的存储空间：

// 组件类中
pestAnswers: { [pestId: string]: { [questionId: string]: any } } = {};

// 初始化答案结构（比如在选中害虫变化时调用）
setupPestAnswers(selectedPests: any[]) {
  this.pestAnswers = {};
  selectedPests.forEach(pest => {
    this.pestAnswers[pest.id] = {};
    // 给当前害虫的每个问题初始化空答案
    pest.questions.forEach(question => {
      this.pestAnswers[pest.id][question.id] = '';
    });
  });
}

2. 修改模板中的绑定逻辑

不再直接绑定到question.answer，而是绑定到我们刚才创建的独立存储位置，同时要确保每个表单控件的name属性唯一（Angular表单要求）：

<div *ngFor="let pest of selectedPests">
  <h3>{{ pest.name }}</h3>
  <div *ngFor="let question of pest.questions">
    <p>{{ question.text }}</p>
    <input 
      type="text"
      [(ngModel)]="pestAnswers[pest.id][question.id]"
      name="answer-{{ pest.id }}-{{ question.id }}"
      placeholder="请填写答案"
    >
  </div>
</div>

为什么这样有效？ #

现在每个害虫的每个问题答案都存在独立的键值对里，不再共享同一个对象的属性。修改害虫A的问题答案时，只会更新pestAnswers[A.id][question.id]，完全不会影响害虫B的对应存储，自然就不会出现同步更新的问题了。

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