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

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

export class YourComponent {

    static correct = true;

    isCorrect(){
        return YourComponent.correct;  
    }

    // or this:
    get ok() {
        return YourComponent.correct;
    }

    // ...
}

Answer 2

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

根据您在评论中提供的代码，我认为您的 ìsCorrect 方法将始终 return 为真，因此您可以直接使用 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">

如何在 Angular 中的变化检测周期中使用静态字段作为函数？

How do I use static field for function in change detection cycle in Angular?

angular2-changedetection

angular