如何在 Angular 测验应用程序中显示选项 1 的说明？

Question

我正在使用 Angular 开发一个测验应用程序，我需要在选择第一个选项时也显示解释文本（解释显示所有选项，但第一个选项除外）。选择选项 1 时，即使没有任何解释，也会变回问题。同样对于问题1（多项选择），选择选项1时会播放错误的声音，但答案是正确的。

di-quiz.component.html 中代码的 sn-p，其中出现了解释文本：

<mat-card-content>
  <scoreboard></scoreboard>

  <section id="question" [class.answered]="answer">
    <span *ngIf="!answer">{{ question?.questionText }}&nbsp;
      <span *ngIf="numberOfCorrectOptions > 1">
        <em>({{ numberOfCorrectOptions }} options are correct)</em>
      </span>
    </span>
    <span *ngIf="answer">{{ explanationText }}</span>
  </section>

  <quiz-question
    [question]="question"
    (answer)="selectedAnswer($event)">
  </quiz-question>
</mat-card-content>

请在此处查看我的 StackBlitz：https://stackblitz.com/edit/angular-9-quiz-app

感谢您在修复这些错误方面提供的帮助。谢谢。

Answer 1

下一个问题没有出现，因为您没有重置answer 属性并且*ngIf="!answer" 始终是true。

当您转到下一个/上一个问题时，尝试重置它：

nextQuestion() {
  this.answer = null;
  this.checkIfAnsweredCorrectly();
  this.quizService.nextQuestion();
}

prevQuestion() {
  this.answer = null;
  this.quizService.prevQuestion();
}

Forked Stackblitz