两个ngFor内部的ngModel-角度/离子

时间:2019-03-09 02:16:52

标签: angular ionic-framework ngfor ngmodel

我尝试用各种问题创建一个测验,每个问题有4个答案,我的逻辑是,第一个ngFor是问题的数量,第二个是您的答案。我的问题是,当我在字母A中键入文本时,每个问题都会受到影响。在图中,我在问题2中写下了答案,但每个问题都得到了这个答案

enter image description here

我的代码html:

<ion-slide *ngFor="let question of listQuestions; let indexQuestion = index ;">
 <div>
  <div>
    <div>{{question.numberQuestion}}</div>
  </div>
 </div>

 <div padding>
  <span></span>
  <ion-item>
    <ion-textarea rows="3" [(ngModel)]="questionClosed.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>

我的代码ts:

public questionClosed: { statement?: string; A?: string; B?: string; C?: string; D?: string; } = {
  statement: null,
  A: null,
  B: null,
  C: null,
  D: null
};
public responses: any = {};

populatedListQuestions(numberQuestions) {
 for (let i = 0; i < numberQuestions; i++) {
  const data = {
    numberQuestion: i + 1,
    description: this.questionClosed
  };
  this.listQuestions.push(data);
  let name = 'question_' + (i+1).toString();
  this.responses[name] = this.questionClosed;
 }
} 

0 个答案:

没有答案