Angular出现ExpressionChangedAfterItHasBeenCheckedError错误求助

错误原因 #

你在模板表达式中调用了pop()方法，这个方法会直接修改原数组（移除数组最后一个元素并返回它）。在Angular开发模式的变更检测流程中，会执行两次检查：

1. 第一次检查时，pop()修改了optionsForVideoPostGraph.series[n].data数组；
2. 第二次检查时，Angular发现表达式的结果和第一次不一致（数组已被修改，再次调用pop()会得到不同的值），因此抛出ExpressionChangedAfterItHasBeenCheckedError。

更严重的是，每次变更检测触发时，数组都会被pop()修改，导致数据持续丢失，完全不符合预期。

解决方案 #

方案一：在组件类中预处理数据（推荐） #

不要在模板中直接操作原数据，而是在HTTP请求返回后，提前取出需要的数值并存储到单独的变量中，模板只负责展示这些变量：

组件类代码：

import { Component, OnInit } from '@angular/core';
import { YourHttpService } from 'path/to/your/service';

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class YourComponent implements OnInit {
  optionsForVideoPostGraph: any;
  maleTotal: number | undefined;
  femaleTotal: number | undefined;
  grandTotal: number | undefined;

  constructor(private httpService: YourHttpService) {}

  ngOnInit(): void {
    this.httpService.getVideoPostGraphData().subscribe(data => {
      this.optionsForVideoPostGraph = data;
      // 安全获取数组最后一个元素，不修改原数组
      const maleData = this.optionsForVideoPostGraph?.series[0]?.data;
      this.maleTotal = maleData ? maleData[maleData.length - 1] : undefined;

      const femaleData = this.optionsForVideoPostGraph?.series[1]?.data;
      this.femaleTotal = femaleData ? femaleData[femaleData.length - 1] : undefined;

      const totalData = this.optionsForVideoPostGraph?.series[2]?.data;
      this.grandTotal = totalData ? totalData[totalData.length - 1] : undefined;
    });
  }
}

模板代码：

<div class="row text-white">
  <div class="col-6">
    <h4 class="pt-1 m-0 text-white">
      <ng-container *ngIf="maleTotal !== undefined && femaleTotal !== undefined">
        <i style="font-size: 2vw;" class="fa fa-male"></i>
        <span>{{ maleTotal }}</span>
        <br> Total Male user <br>
        <i style="font-size: 2vw;" class="fa fa-female"></i>
        <span>{{ femaleTotal }}</span>
      </ng-container>
    </h4>
  </div>
  <div class="col-6 text-right pl-0">
    <span>{{ grandTotal }}</span>
    <br />
    <span>Total</span>
  </div>
</div>

方案二：在模板中使用不修改原数组的方式取最后一个元素 #

如果不想修改组件逻辑，可以直接在模板中通过索引获取数组最后一个元素，避免调用pop()：

修改后的模板关键部分：

<span>{{ optionsForVideoPostGraph?.series[0]?.data?.[optionsForVideoPostGraph?.series[0]?.data?.length - 1] }}</span>
<!-- 女性用户数据 -->
<span>{{ optionsForVideoPostGraph?.series[1]?.data?.[optionsForVideoPostGraph?.series[1]?.data?.length - 1] }}</span>
<!-- 总计数据 -->
<span>{{ optionsForVideoPostGraph?.series[2]?.data?.[optionsForVideoPostGraph?.series[2]?.data?.length - 1] }}</span>

这种写法虽然可行，但表达式较长，可读性不如方案一，且数组为空时需要额外处理，因此更推荐方案一。

内容的提问来源于stack exchange，提问作者JD smith