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

【问题标题】：Why ngFor async pipe needs Observable<any[]> instead of Observable<any>?为什么 ngFor 异步管道需要 Observable<any[]> 而不是 Observable<any>？
【发布时间】：2018-01-19 17:47:05
【问题描述】：

我有以下模板：

*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>？

【问题讨论】：

你是如何获取contacts的？

标签： angular rxjs reactivex

【解决方案1】：

这不是因为async 管道。

contacts Observable 发出对象而不是数组，您不能使用*ngFor 迭代对象。这就是错误消息的内容。

所以问题出在contacts。看看它真正发出了什么。

【讨论】：

我使用异步捕获 Observable 发出的对象。一次获取整个联系人列表而不是逐项获取有什么意义？
async 与 ngFor 结合并不意味着每个项目都发出项目。如果你想这样使用，你可以使用 scan() 操作符
@clemtoy kvetis 是对的。 async 管道仅显示您发出的内容。它不是用来“收集”物品的，因为你发射它们。这就是 scan 运算符的优点。

【解决方案2】：

ngFor 需要查看一个可迭代的 `contacts'（如 @martin 所述），这也意味着它需要知道它正在迭代的内容的 extent，即您想要多少项目显示。

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

模板

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

组件

contactsList = this.contacts.toArray();

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

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

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

演示：StackBlitz

【讨论】：