Angular 如何在ngClass中使用函数？

我试图使用ngClass函数将逻辑从模板中分离出来，以使代码更易于维护，但从is-error样式开始，所有选项都高亮显示为红色。请参阅下面我的代码：

<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;
}

---

在您的评论中，您说您正在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;
}

---

可能是因为你没有为你的mat单选按钮导入提供者。显示突出显示的注释。我正在app.module.ts文件中使用provider:providers:[{provide:MAT\u RADIO\u DEFAULT\u OPTIONS，useValue:{color:'accent'}，}]，您在任何模块中都有这个吗？从'@angular/material/radio'导入{MatRadioModule}；您是否使用ngFor循环来创建单选按钮？我从'@angular/material/radio'导入了{MatRadioModule，MAT_radio_DEFAULT_OPTIONS}；在我的app.module.ts文件中，好的，我做了这些更改，但仍然得到所有红色突出显示的选项。是否因为我已将option和selectedRadioButtonOption都声明为？您还需要在函数中将另一个this.option更改为option。对不起，我第一次错过了。我更新了anwserTried。将此选项更改为选项，按钮最初变为灰色，但单击时不会变为绿色或红色\n您需要有一个单击事件设置，将selectedRadioButtonOption变量更改为单击的选项是，我想我以前有过一个，但已删除它…单击=selectedRadioButtonOption=option.optionValue