Angular вопрос викторины и проблема объяснения

Question

Я работаю над приложением для викторины, и мне нужно, чтобы текст объяснения отображался при выборе ответа. В настоящее время он отображается только при выборе правильного ответа, но не при первом выборе неправильного ответа. Объяснение заменяется вместо вопроса. Также для следующего вопроса он должен быть сброшен, но после показа объяснения следующий вопрос не отображается (ИСПРАВЛЕНО). Когда выбран вариант 1, объяснение (даже если его нет) меняется на вопрос.

Это снимок с моего di-quiz.component. html ниже:

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

  <section id="question" [class.answered]="answer">
    <span *ngIf="!answer">{{ question?.questionText }}</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();
}

Разветвленный стек-блиц