如何正确在Angular的*ngFor中使用迭代器？

你遇到的ExpressionChangedAfterItHasBeenCheckedError错误，核心原因是Angular的变更检测机制在开发模式下会做两次校验：第一次渲染视图，第二次验证视图状态是否稳定。而你每次调用foobarIterator()都会返回一个全新的迭代器实例，这就导致两次校验时绑定的“值”（迭代器对象）不一致，触发了Angular的变更检测报错。

下面是几种适配Angular机制的正确解决方案，你可以根据实际场景选择：

1. 直接遍历数组（最推荐） #

数组本身就是可迭代对象，*ngFor完全可以直接遍历数组，不需要额外封装迭代器方法。这种方式最简单，也完全符合Angular的变更检测预期：

模板代码：

<div *ngFor="let something of foobar">
  <!-- 你的内容 -->
</div>

组件里直接使用foobar数组即可，不需要保留foobarIterator()方法。

2. 预存迭代器实例到组件属性 #

如果你确实需要使用自定义迭代器（比如处理非数组的可迭代对象），不要在模板里每次调用方法生成新实例，而是在组件初始化或数据更新时，把迭代器实例存储到一个组件属性中：

组件代码：

private foobar = [];
public foobarIterator: Iterator<any>;

ngOnInit() {
  // 初始化时生成迭代器实例
  this.foobarIterator = this.foobar[Symbol.iterator]();
}

// 当foobar数组内容更新时，重新生成迭代器
updateFoobar(newData: any[]) {
  this.foobar = newData;
  this.foobarIterator = this.foobar[Symbol.iterator]();
}

模板代码：

<div *ngFor="let something of foobarIterator">
  <!-- 你的内容 -->
</div>

这种方式确保变更检测时，模板绑定的始终是同一个迭代器实例（除非你主动更新它），不会触发错误。

3. 使用自定义纯管道 #

如果你的迭代器需要动态生成（比如依赖于某些参数），可以用Angular的纯管道来封装迭代器逻辑。纯管道只有当输入参数的引用发生变化时才会重新计算，不会在每次变更检测时都生成新的迭代器：

首先创建一个自定义管道：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'iterator' })
export class IteratorPipe implements PipeTransform {
  transform<T>(value: Iterable<T>): Iterator<T> {
    return value[Symbol.iterator]();
  }
}

在模块中声明这个管道后，就可以在模板中使用：

<div *ngFor="let something of foobar | iterator">
  <!-- 你的内容 -->
</div>

这样只有当foobar数组的引用发生变化时，管道才会生成新的迭代器，避免了每次变更检测都产生新实例的问题。

补充说明 #

Angular文档确实提到*ngFor支持可迭代对象，但这里的关键是：绑定的可迭代对象在变更检测周期内应该保持稳定（即同一个实例），而不是每次访问都生成新实例。你的原始写法因为每次调用方法都返回新迭代器，违反了这个稳定性要求，所以才会报错。

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