* ng中的NgModel函数在启动时会运行太多次

Question

我在屏幕上显示了一个列表列表，称为教程。每个教程的内部都有一个状态列表，旁边有一个复选框，如下所示：

我的教程来自数据库，状态列表也来自数据库。教程具有名称和字符串数组，以及与之相关的状态列表。这是我的HTML：

 <div class="container">
  <div *ngFor="let t of tutorials" id="quote" class="quote">
    <div class="tutorial-name">
      {{ t.name }}
    </div>

    <div *ngFor="let s of states" class="tutorial-states" id="">
      <mat-checkbox [ngModel]="checkIfTrue(t.states, s)" (click)="changeState(t.name,s)">{{ s }}</mat-checkbox>
    </div>

  </div>
</div>

根据需要启用了必要的复选框，但是[ngModel] =“ checkIfTrue（t.states，s）”的运行次数超出了预期。我有3个教程和3个不同的状态，因此ngModel应该只触发9次。我在打字稿中指望那个功能：

  checkIfTrue(states: string[], state: string) {
    this.count += 1;
    console.log(this.count)
    if(states.includes(state)){
  return true;
}

计数使它变为252或54，远远超过所需的9。 有谁知道为什么如此之大的触发以及如何停止它？ 还是我的循环中有错误，而触发它太多是我的错。

Answer 1

为什么计数增加？

之所以会看到这一点，是因为您正在将函数绑定到输入。 Angular需要在每个变更检测周期内重新检查此输入，以确定是否需要重新呈现。为此，它需要在每个周期内调用函数并将结果与​​先前的结果进行比较。我在StackBlitz上添加了一个示例，您可以在其中清楚地看到此行为（单击按钮以触发角度变化检测）。

如何防止代码中出现这种情况？

将函数绑定到模板在角度上是不好的做法。原因恰恰是您现在所看到的问题：该函数被大量调用。因此，您可以通过不绑定功能来防止这种情况，而是使用变量绑定到模板并在状态更改时更新该变量。