Angular输入框触发calculateTotal引发ExpressionChangedAfterItHasBeenCheckedError问题

为什么calculateTotal会在输入时触发且值不断变化？ #

这两个问题是关联在一起的，咱们一步步拆解：

1. 函数被频繁触发的原因
   Angular的变更检测机制会在很多场景下自动运行——比如用户输入、点击事件、定时器触发等。你的模板里直接写了{{calculateTotal(21)}}，这意味着每次变更检测运行时，这个函数都会被执行一次。当你在输入框输入内容时，Angular会自动触发变更检测，自然就会调用calculateTotal，而不是只有点击按钮时才执行。

2. 值“随机”变化的真相
   看一下你的calculateTotal实现：

calculateTotal = (duration) => {
  console.log(duration);
  return this.totalDuration += duration;
}

这个函数每次被调用都会把totalDuration加上传入的21，然后返回新值。每次变更检测执行一次，它就累加一次21，所以你看到的值会不断增加，看起来像“随机变化”，其实是每次变更检测都在重复累加操作。

3. 为什么会抛出ExpressionChangedAfterItHasBeenCheckedError？
   这个错误是Angular开发模式下的校验机制：它会在变更检测完成后再检查一次数据是否稳定。当你在模板调用的函数里修改了组件的totalDuration属性，第一次变更检测后这个值发生了变化，第二次检查时发现前后值不一致，就会抛出这个错误。

正确的解决方案 #

要实现“点击按钮后计算总时长”的需求，你需要避免在模板里调用有副作用的函数（比如修改组件属性的函数），而是在addDuration方法里更新总时长，模板只负责显示预计算好的值：

1. 修改组件逻辑

更新addDuration方法，每次添加时长时直接累加总时长，移除calculateTotal的副作用：

export class AppComponent {
  durationModel: DurationModel = new DurationModel();
  durationList = [];
  totalDuration = 0;

  addDuration() {
    if (this.durationModel.Duration) {
      const newDuration = this.durationModel.Duration;
      this.durationList.push(newDuration);
      // 在这里累加总时长，点击按钮时才执行
      this.totalDuration += newDuration;
      this.durationModel = new DurationModel();
    }
  }

  calculateDuration(duration) {
    if (duration > 60) {
      const hours = Math.floor(duration / 60);
      const minutes = Math.floor(duration % 60);
      return `${hours} hours ${minutes} min.`;
    }
    return `${duration} min.`;
  }
}

2. 修改模板

模板里直接显示预计算好的totalDuration，不需要调用带副作用的函数：

<div>
  <label>Duration</label>
  <input [(ngModel)]="durationModel.Duration" type="text" name="Duration" value="" #inputValue />
  <button (click)="addDuration()">Submit</button>
  <div [hidden]="durationList.length === 0">
    <ul>
      <li *ngFor="let duration of durationList">
        {{calculateDuration(duration)}}
      </li>
    </ul>
    <!-- 直接显示预计算好的总时长，用calculateDuration格式化显示 -->
    <div>Total Duration : {{calculateDuration(totalDuration)}}</div>
  </div>
</div>

这样修改后：

• 只有点击按钮时才会更新总时长，输入框输入不会触发累加
• 模板里的calculateDuration是纯函数（只接收参数返回结果，不修改组件状态），不会触发变更检测的错误
• 彻底解决ExpressionChangedAfterItHasBeenCheckedError问题

额外提醒：模板中应避免调用有副作用的函数 #

Angular的变更检测可能会比你想象的更频繁运行，所以模板里的表达式应该尽量是纯函数（不修改组件状态，相同输入返回相同输出），否则很容易出现意外的行为和性能问题。如果需要修改组件状态，尽量在事件处理函数（比如按钮的click）里执行。

内容的提问来源于stack exchange，提问作者Safa Elmalı