Angular/Ionic双层ngFor中ngModel绑定异常问题求助

嘿，我一眼就看出你遇到的问题根源啦！所有问题选项同步修改的核心原因是你让所有问题共用了同一个对象引用，咱们一步步来拆解和解决：

问题原因分析 #

你定义的questionClosed是一个对象，在JS/TS里对象属于引用类型——也就是说，当你在populatedListQuestions循环里把this.questionClosed赋值给每个问题的description和responses条目时，所有这些变量其实都指向内存里的同一个对象。不管你修改哪个问题的选项，本质上都是在改同一个对象，所以所有问题的对应选项都会跟着变。

解决方案 #

1. 修改TypeScript代码：每次循环生成独立对象 #

把原来的questionClosed变量改成一个创建新对象的函数，这样每次循环都能生成完全独立的对象，避免引用共享：

// 替换原来的questionClosed变量定义，改成创建新对象的函数
private createNewQuestionClosed() {
  return { statement: null, A: null, B: null, C: null, D: null };
}

public responses: any = {};
populatedListQuestions(numberQuestions) {
  // 先清空列表和响应对象，避免重复数据
  this.listQuestions = [];
  this.responses = {};
  
  for (let i = 0; i < numberQuestions; i++) {
    // 每次循环调用函数生成新的独立对象
    const newQuestionObj = this.createNewQuestionClosed();
    const data = { numberQuestion: i + 1, description: newQuestionObj };
    this.listQuestions.push(data);
    
    const questionKey = 'question_' + (i + 1).toString();
    this.responses[questionKey] = newQuestionObj;
  }
}

2. 调整HTML模板：绑定到当前问题的独立对象 #

原来的ngModel绑定的是全局的questionClosed，现在要改成绑定到当前遍历的question对应的独立对象：

<ion-slide *ngFor="let question of listQuestions; let indexQuestion = index;">
 <div>
  <div>
   <div>{{question.numberQuestion}}</div>
  </div>
 </div>
 <div padding>
  <span></span>
  <ion-item>
   <!-- 绑定到当前问题的statement属性 -->
   <ion-textarea rows="3" [(ngModel)]="question.description.statement"></ion-textarea>
  </ion-item>
  <ion-row *ngFor="let letter of listLetters; let index = index;">
   <ion-col col-1 (click)="selectAnswer(letter)">
    <span>{{letter}}</span>
   </ion-col>
   <ion-col>
    <ion-item>
     <!-- 绑定到当前问题对应响应对象的选项属性 -->
     <ion-textarea rows="2" [(ngModel)]='responses["question_" + (question.numberQuestion).toString()][letter]'></ion-textarea>
    </ion-item>
   </ion-col>
  </ion-row>
 </div>
</ion-slide>

验证效果 #

现在再调用populatedListQuestions生成多个问题时，每个问题的输入框都是完全独立的——你在某个问题的选项里填写内容，只会影响当前问题的选项，其他问题不会同步变化啦！

内容的提问来源于stack exchange，提问作者Bruno Inácio