基於動態布爾角度顯示div

Question

從 ngFor 內的反應形式獲取輸入，我必須根據用戶答案與 execution.question.answer 值的比較來顯示“正確”或“不正確”。

我的想法是被動地創建一個布爾值，但我正在努力執行。 每次創建這些數組時，我都無法將數組 a 的索引 [x] 與數組 b 的索引 [x] 進行比較。

這是模板：

<form
    fxLayout="column"
    fxLayoutGap="2px"
    [formGroup]="exerciseForm"
    (ngSubmit)="onSubmit(exerciseForm.value)"
  >
    <ul *ngFor="let exercise of exercises">
      <li>{{ exercise.instruction }}</li>
      <ul *ngFor="let question of exercise.questions; let i = index">
        <li>
          {{ question.prefix }}
          <mat-form-field>
            <input
              name="answer"
              type="text"
              id="answer"
              matInput
              [formControlName]="question.id"
            />
          </mat-form-field>
          {{ question.sufix }} -
          {{ question.translation }}
          <div *ngIf="isAnswered">
            <div *ngIf="isCorrect"><p>Correct</p></div>
            <div *ngIf="!isCorrect"><p>Incorrect</p></div>
          </div>

        </li>
      </ul>
    </ul>
    <button type="submit" mat-raised-button color="primary">Submit</button>
  </form>

這是 ts（它包含我一直在嘗試的一些方法）

export class ExerciseTestsComponent implements OnInit {
  exerciseForm: FormGroup;
  isAnswered: boolean; 
  isCorrect: boolean; 

  exercises: Exercise[] = [
    new Exercise("Answer this question", [
      new Question(1, "Eu", "maluco", "I am crazy", "sou"),
      new Question(2, "Eu", "doidinho", "I am cuckoo", "estou")
    ])
  ];

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.createGroup();
  }

  getAnswersArray() {}

  createGroup() {
    this.exerciseForm = this.fb.group({});
    this.exercises[0].questions.forEach(control =>
      this.exerciseForm.addControl(control.id.toString(), this.fb.control(""))
    );
  }

  onSubmit(answer: TestAnswer) {
    this.isAnswered=true; 
    //** 1
    let answers = [];
    let answersInput = [];
    this.exercises[0].questions.forEach(pergunta => {
      //** 2
      answers.push(pergunta.answer);
      console.log(answers);
    });

    //** 3
    var bosta = Object;
    bosta = this.exerciseForm.value;
    console.log(bosta[1]);
    if ((answers[1] = bosta[1])) {
      console.log("pqp");
    }
    let incoming = this.exerciseForm.value;

    for (var o in incoming) {
      answersInput.push(incoming[o]);
      console.log(answersInput);
    }

    answersInput.forEach(a1 =>
      answers.forEach(a2 => {
        if (a1 === a2) {
          console.log("yay");
        } else {
          console.log("boo");
        }
      })
    );
  }
}

//** for every object created, I have to check if answer =  */

堆棧閃電戰： https ://stackblitz.com/edit/angular-dzzzzql

Answer 1

然后當你提交時，你可以比較兩個答案

 onSubmit(answer: Answer) {

    let answers = [];
    console.log(this.exercises)

    let answersInput = []
    this.exercises[0].questions.forEach((pergunta, index) => {
        answers.push(pergunta.answer)
        console.log(answers)
        return answers
    })

    let i = 0;
    for (const field in this.exerciseForm.controls) { // 'field' is a string
        console.log(this.exerciseForm.controls[field].value == answers[i]);
        i++;
    }


}

Stackblitz 中的工作演示