如何在 Angular /QuizApp 中显示我的对象数组中的 属性

Question

我正在做一个测验模拟器应用程序，我想在单击“显示答案”按钮后向我显示当前问题的答案。我现在有点困惑，我创建了一个函数 console.log 所有问题的所有正确答案，但我不知道如何在我的应用程序中插入它以及如何为每个当前问题进行插入.

顺便说一句。对不起，我是新手，我的第一个 post 在这里

这是我的组件html:

`<div class="container p-5 ">
  <div class="row">
    <div class = "col-sm-8 offset-2">
      <p class = "text-center">{{currentQuestion + 1 }} of {{questions.length}} </p>
      <h3>{{questions[currentQuestion].question}}</h3>
      <div  *ngFor="let question of questions[currentQuestion].answers">
        <label appOptionBackground [correctAnswer]="question.correct"  class="form-check-label" for="answersRadio">
            <input  class="form-check-input" type="radio" name="answersRadio" (change)="onAnswer(question.correct)" [disabled]="answerSelected">
          {{ question.option }}
        </label>

      </div>
      <button class="btn btn-info btn-block" (click)="showResult()">Show Result</button>
      <div *ngIf="result">
        Correct Answers: {{correctAnswers}} |  Incorrect Answers {{incorrectAnswers}}
      </div>
        <button (click) ="showAnswer()">show answer</button>

      <div>{{correctOption}}
      </div>
</div>`  

这是我的组件 ts :

import { Component, OnInit } from '@angular/core';
import { QuestionsService } from '../shared/questions.service';
import {Question} from '../shared/question';

@Component({
  selector: 'app-question-learn',
  templateUrl: './question-learn.component.html',
  styleUrls: ['./question-learn.component.css']
})
export class QuestionLearnComponent implements OnInit {
questions: Question[] = [];

currentQuestion = 0;
answerSelected = false;
correctAnswers = 0;
incorrectAnswers = 0;

correctOption = '';

result = false;

constructor(private questionService: QuestionsService) { }

  ngOnInit(): void {
    this.questions = this.questionService.getQuestions();

  }



  onAnswer(option: boolean) {
    this.answerSelected = true;
    setTimeout(() => {
      this.currentQuestion++;
      this.answerSelected = false;
    }, 2000);

    if(option) {
      this.correctAnswers++;
    } else {
      this.incorrectAnswers++;
    }

  }

  showResult() {
    this.result = true;
  }

  showAnswer() {
    for (let question of this.questions) {
        for (let answer of question.answers) {
          if (answer.correct === true ) {
              this.correctOption = answer.option;
             console.log(this.correctOption);
          }
        }
    }
  }
}

这是一张图片：

enter image description here

Answer 1

试试这个。

  showAnswer = () => {
    const question = this.questions[this.currentQuestion];
    for (let answer of question.answers) {
      if (answer.correct === true ) {
        this.correctOption = answer.option;
        console.log(this.correctOption);
      }
    }
  }