Angular测验应用如何点击按钮展示对象数组中当前题的正确答案属性

问题根源 #

你现有showAnswer方法遍历了全部题目，每找到一个正确答案就覆盖一次correctOption的值，最终只会保留最后一道题的正确答案，自然无法匹配当前正在展示的题目。

修改步骤 #

1. 修改组件TS代码 #

首先调整showAnswer方法，只针对当前展示的题目查找正确答案，同时新增变量控制答案的显示状态，避免切题时残留上一题的答案：

// 新增变量控制答案显示
isShowAnswer = false;

showAnswer() {
  // 只取当前展示的题目
  const currentQues = this.questions[this.currentQuestion];
  // 遍历当前题的选项找正确答案
  for (let answer of currentQues.answers) {
    if (answer.correct) {
      this.correctOption = answer.option;
      break;
    }
  }
  this.isShowAnswer = true;
}

// 记得在切题的时候重置答案显示状态
onAnswer(option: boolean) {
  this.answerSelected = true;
  setTimeout(() => {
    this.currentQuestion++;
    this.answerSelected = false;
    // 新增：切题时隐藏上一题的答案
    this.isShowAnswer = false;
  }, 2000);

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

2. 修改组件HTML代码 #

给正确答案的展示容器加显示判断，避免未点击按钮时出现空白区域：

<!-- 原有show answer按钮不变 -->
<button (click)="showAnswer()">show answer</button>
<!-- 修改答案展示区域 -->
<div *ngIf="isShowAnswer">
  正确答案：{{correctOption}}
</div>

改完之后点击按钮就会只展示当前题目的正确答案，切换下一题时答案会自动隐藏。

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