使用ngAfterContentChecked解决变更检测报错后页面数据空白问题

兄弟，你的问题根源其实出在模板里的*ngFor写法上，而不是ngAfterContentChecked里的detectChanges()——那个只是你为了临时绕开错误加的，但反而让问题更严重了。

先说说为什么会出现这些问题： #

1. 变更检测错误的原因：Angular在开发模式下会执行两次变更检测，确保检测前后数据没有变化。你在*ngFor的数据源里直接调用increment()方法，每次检测都会执行这个方法，导致messageSplit[increment()]的返回值在两次检测之间发生了变化，触发了"expression has changed after it was checked"错误。
2. 数据空白的原因：你加了this.cdr.detectChanges()后，会强制触发更多次变更检测，increment()被调用的次数剧增，很快就会让索引超出messageSplit的长度，最后取到的是undefined或者空数组，自然显示空白了——哪怕你把<td>改成纯文本，只要ngFor遍历的是空数组，就不会渲染任何内容。

正确的修复方案： #

第一步：移除不必要的detectChanges()

先把ngAfterContentChecked里的代码删掉，这个方法只是饮鸩止渴，解决不了根本问题：

// 删掉这段代码
ngAfterContentChecked() { 
  this.cdr.detectChanges(); 
}

第二步：重构*ngFor的写法，避免在模板表达式中修改状态

绝对不要在ngFor的数据源里调用会改变组件状态的方法（比如increment()），应该提前在组件中准备好要遍历的数组。

举个例子，假设你原本想用increment()来切换messageSplit中的数组项，那可以这么改：

组件代码：

// 维护当前要显示的数组索引
currentDisplayIndex = 0;

// 提供一个获取当前显示数组的属性
get currentDisplayItems(): any[] {
  // 做边界处理，避免索引越界
  if (this.currentDisplayIndex >= this.messageSplit.length) {
    this.currentDisplayIndex = 0;
  }
  return this.messageSplit[this.currentDisplayIndex] || [];
}

// 手动触发索引递增的方法（比如在需要切换的时候调用，比如按钮点击、定时器等）
incrementDisplayIndex() {
  this.currentDisplayIndex++;
}

模板代码：

<div>
  <div *ngFor="let item of currentDisplayItems">
    <td>{{item}}</td>
  </div>
</div>

如果你的increment()只是想给每个遍历的item加序号，那完全可以用AngularngFor自带的index变量：

<div>
  <div *ngFor="let item of messageSplit; let i = index">
    <td>{{i + 1}}: {{item}}</td>
  </div>
</div>

总结一下核心原则： #

模板表达式应该是纯函数——也就是执行后不会改变组件的状态，多次执行返回的结果也一致。像increment()这种会修改变量的方法，绝对不能放在模板表达式里，这是Angular开发的大忌。

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