Angular全局变量Counter实现计数器遇ExpressionChangedAfterItHasBeenCheckedError问题

首先得说清楚你为啥会碰到这个错误：Angular的变更检测机制会在组件渲染完成后再检查一遍视图绑定的值，确保前后一致。但你现在在模板里直接调用globals.incrementQuestionNumber()，每次变更检测跑起来都会执行这个方法，计数器就会一直涨，导致Angular发现“哎？刚检查完的值怎么又变了？”，直接给你抛出这个异常。而且这么做还有个隐藏问题：如果Angular触发多次变更检测（比如其他组件更新、用户交互），你的问题序号会莫名其妙地跳数，完全不符合预期。

正确的实现思路 #

既然不能用*ngFor，那我们就得提前把每个问题的序号确定好，而不是在模板渲染时动态计算。分两种情况给你方案：

情况1：仅当前组件使用序号（不依赖全局计数器） #

如果只是当前组件的几个固定问题需要序号，直接在组件里生成好序号数组或者单个变量就行：

// 你的组件类
import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 假设有3个问题，直接生成1、2、3的序号
  questionNumbers = [1, 2, 3];
}

然后模板里直接绑定对应的序号：

<div> {{ questionNumbers[0] }}. What is your favorite color? </div>
<div> {{ questionNumbers[1] }}. What is your favorite car? </div>
<div> {{ questionNumbers[2] }}. ... </div>

情况2：依赖全局Globals类的计数器（跨组件保持序号连续） #

如果这个计数器是全局共用的，那得修改Globals类的逻辑，不要在模板里直接调用递增方法，而是在组件初始化时就把每个问题的序号拿好：

首先修改Globals类，把递增和取值分开（或者直接提供一个获取下一个序号的方法）：

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class Globals {
  private counter = 0;

  // 获取下一个序号，同时递增计数器
  getNextQuestionNumber(): number {
    this.counter++;
    return this.counter;
  }
}

然后在你的组件里，初始化时就把每个问题的序号存下来：

import { Component, OnInit } from '@angular/core';
import { Globals } from './globals';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  q1Number!: number;
  q2Number!: number;
  q3Number!: number;

  constructor(private globals: Globals) {}

  ngOnInit(): void {
    // 在组件初始化时一次性获取所有问题的序号
    this.q1Number = this.globals.getNextQuestionNumber();
    this.q2Number = this.globals.getNextQuestionNumber();
    this.q3Number = this.globals.getNextQuestionNumber();
  }
}

最后修改模板，绑定提前获取好的序号变量：

<div> {{ q1Number }}. What is your favorite color? </div>
<div> {{ q2Number }}. What is your favorite car? </div>
<div> {{ q3Number }}. ... </div>

为啥这个方案能解决问题？ #

不管哪种情况，我们都是在组件初始化阶段就确定了所有序号的值，后续变更检测时，模板绑定的变量不会再发生变化，Angular就不会检测到值的异常变更，自然就不会抛出那个错误了。

如果之后你需要动态添加问题（比如点击按钮新增一个问题），那也得在事件回调里先获取新的序号，再更新模板绑定的变量，而不是在模板里直接调用递增方法。

内容的提问来源于stack exchange，提问作者Michael Niño