如何在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;
    }

    // ...
}