Question

我有以下模板：

*ngFor="let contact of contacts | async"

其中：

contacts: Observable<any>;

我收到此错误：

ERROR Error: Cannot find a differ supporting object '[object Object]'
    of type 'object'. NgFor only supports binding to Iterables such as Arrays.

为什么ngFor异步管道需要Observable<any[]>而不是Observable<T>？

Answer 1

这不是因为async管道。

contacts Observable会发出对象而不是数组，您无法使用*ngFor迭代对象。这就是错误信息所说的内容。

问题在于contacts。看看它真正发出的是什么。

Answer 2

ngFor需要看到一连串的“联系人”。（正如@martin已经说过的那样），这也意味着它需要知道它的迭代的范围，即你打算显示多少项。

最简单的方法是添加另一个使用toArray()运算符的属性到组件中，并在模板中使用它。

<强>模板

<div *ngFor="let contact of contactsList | async">
  From contactsList: {{contact}}
</div>

<强>组件

contactsList = this.contacts.toArray();

但是，如果您想在联系人可观察完成之前显示某些内容（即在发出每个联系人时添加到ngFor），则需要缓冲可观察。

private buffer = []; 
contactsList = Observable.of(this.buffer); 

ngOnInit() {
  this.contacts.subscribe(contact => {
    this.buffer.push(contact)
  })
}

演示：StackBlitz

为什么ngFor异步管道需要Observable <any []>而不是Observable <any>？

2 个答案: