Как использовать функции внутри ngClass?

Question

Я пытаюсь использовать функции с ngClass, чтобы отделить логику от моего шаблона, чтобы сделать код более понятным, но я получаю все опции, выделяющие красный цвет изначально из-за неправильного стиля.Пожалуйста, смотрите мой код ниже:

<mat-radio-button class="answer" [value]="option.optionValue" disableRipple="true"
[ngClass]="{'initial-state': initialState(),
            'is-correct': isCorrect(),
            'is-incorrect': isIncorrect()}">
</mat-radio-button>

initialState(): boolean {
  return this.selectedRadioButtonOption === '';
}

isCorrect(): boolean {
  return this.option === this.question.correctAnswer
           && this.selectedRadioButtonOption === this.question.correctAnswer;
}

isIncorrect(): boolean {
  return this.option !== this.question.correctAnswer
           && this.selectedRadioButtonOption === this.option;
}

Answer 1

В своем комментарии вы сказали, что создаете переключатели в цикле ngFor.Таким образом, в HTML «опция» относится к данным определенной радиокнопки.В файле TS «опция» является собственной переменной, поэтому она никогда не изменится.Попробуйте отправить значение опции в функции.

Так бы это выглядело

<mat-radio-button class="answer" [value]="option.optionValue" disableRipple="true"
[ngClass]="{'initial-state': initialState(),
        'is-correct': isCorrect(option.optionValue),
        'is-incorrect': isIncorrect(option.optionValue)}">
</mat-radio-button>

initialState(): boolean {
  return this.selectedRadioButtonOption === '';
}

isCorrect(option): boolean {
  return option === this.question.correctAnswer
       && this.selectedRadioButtonOption === option;
}

isIncorrect(option): boolean {
  return option !== this.question.correctAnswer
       && this.selectedRadioButtonOption === option;
}