Question

TL; DR：
使用带ExpressionChangedAfterItHasBeenCheckedError的迭代器时，Angular会引发ngFor。

我有一个使用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最后提供了一个新管道keyvalue（API docs），可将其用于对象和地图，如下所示：

@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']]);
}

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

1 个答案: