为什么我的Angular组件方法不起作用？

Question

I'm making a basic quiz application. Whenever the user answers the question I want the answer to be determined as correct/incorrect, move to the next question, and hide the correct / incorrect messages.

Problem: The h2 correct/incorrect messages are not hiding themselves when this.correct / this.incorrect is set to null/false.

I want these h2s to display for 2 sections before going on to the next question.

Here is the part of the html template that should be toggling, but they're not.:

  <h2 *ngIf="correct">Correct</h2>
  <h2 *ngIf="incorrect">Incorrect! The answer is {{ questions[counter].answer }}</h2>

Here is one component method:

compareAnswer(userAnswer) {

  const currentAnswer = this.questions[this.counter].answer;
  if (currentAnswer.includes(userAnswer.answer)) {
    console.log('Correct!');
    this.correctAnswers += 1;
    this.correct = true;
  } else {
    this.incorrect = true;
  }
  //the correct/incorrect h2s show and then this method should clear for the 
  //next question
  setTimeout(this.handleNextQuestion, 2000);
}

Here is the handleNextQuestion method :

handleNextQuestion() {
  //setting these properties should connect with the ngIf on the h2's and 
  //hide them, but its not doing that.
  this.correct = null;
  this.incorrect = null;

  this.counter += 1;
}

The component properties correct/incorrect are on the component like this:

  correct = null;
  incorrect = null;

Answer 1

It's because the context of this is lost when you do setTimeout(this.handleNextQuestion, 2000);

You should change it to:

setTimeout(() => this.handleNextQuestion(), 2000);

As the arrow functions will bind the context