如何在 Angular 中的变化检测周期中使用静态字段作为功能?

Question

我想使用静态字段，而不是在我的模板中的每个CD周期上调用函数isCorrect(option.correct，i(。请你能帮我做到这一点。谢谢。

我的模板代码如下所示：

<form [formGroup]="formGroup">
<ol *ngIf="!multipleAnswer">
<div class="options" *ngFor="let option of currentQuestion.options; index as i">
<mat-radio-button
(change)="setSelected(i)"
[class.is-correct]="option.selected && option.correct"
[class.is-incorrect]="option.selected && !option.correct">
<li>{{ option.text }}</li>
<mat-icon class="feedback-icon" *ngIf="option.selected && option.correct && isCorrect(option.correct, i)">done
</mat-icon>
<mat-icon class="feedback-icon" *ngIf="option.selected && !option.correct">clear</mat-icon>
</mat-radio-button>
<section class="messages" *ngIf="option.selected">
<div *ngIf="option.selected && option.correct && isCorrect(option.correct, i)">
<mat-icon class="sentiment">sentiment_very_satisfied</mat-icon>&nbsp;&nbsp;&nbsp;
<span class="message correct-message">
You&apos;re right! {{ correctMessage }}
</span>
</div>
...

Answer 1

据我了解，它并不是您需要的静态字段。您只需要组件上的变量或其中一个选项即可知道该选项是否正确。

从您在评论中提供的代码来看，我认为您的ìsCorrect方法将始终返回 true，因此您可以直接使用option.correct而不是isCorrect(option.correct, i)

如果该isCorrect方法确实执行了一些棘手的逻辑，则可以在setSelected方法中调用该方法，每当选择更改时都会调用该方法。或者，您可以设置组件变量并在模板中使用它

class MyComponent
{
public correct: isCorrectAnswerSelected = false;
//...
setSelected()
{
this.isCorrectAnswerSelected = this.isCorrect(... );

模板

<div *ngIf="option.selected && option.correct && isCorrectAnswerSelected">    

Answer 2

您可以在函数中使用静态字段：

export class YourComponent {
static correct = true;
isCorrect(){
return YourComponent.correct;  
}
// or this:
get ok() {
return YourComponent.correct;
}
// ...
}