angular - 将 *ngFor 与迭代器一起使用的正确方法是什么？

Question

长话短说:
当使用带有 ngFor 的迭代器时，Angular 会引发 ExpressionChangedAfterItHasBeenCheckedError。

---

我有一个使用 ngFor 的模板，例如:

<div *ngFor="let something of foobarIterator()">

TypeScript 代码如下:

private foobar = [];

public foobarIterator() {
    return this.foobar[Symbol.iterator]();
}

根据 Angular 文档，允许将迭代器传递给 ngForOf它确实有效……除了它在之后抛出一个 ExpressionChangedAfterItHasBeenCheckedError。

虽然我知道这可能是因为每次调用该方法时我都返回一个新的迭代器实例，但我并没有得到 Angular 期望的结果。在迭代器耗尽后使用相同的迭代器实例是没有意义的——毕竟它是一个迭代器，而不是数组本身。

那么在 ngFor 中使用迭代器的正确方法是什么？

Answer 1

这个问题已经discussed和 solutions proposed几次..虽然不太好找。

Angular 6.1.0 finally 提供了一个新的管道 keyvalue ( API docs )，它可以像这样用于对象和 map :

@Component({
  selector: 'keyvalue-pipe',
  template: `<span>
    <p>Object</p>
    <div *ngFor="let item of object | keyvalue">
      {{item.key}}:{{item.value}}
    </div>
    <p>Map</p>
    <div *ngFor="let item of map | keyvalue">
      {{item.key}}:{{item.value}}
    </div>
  </span>`
})
export class KeyValuePipeComponent {
  object: {[key: number]: string} = {2: 'foo', 1: 'bar'};
  map = new Map([[2, 'foo'], [1, 'bar']]);
}