时间戳

首页 > 解决方案 > 使用 RXJS 和 AsyncPipe 而不是 Observable.subscribe

angular - 使用 RXJS 和 AsyncPipe 而不是 Observable.subscribe

问题描述

在我的 firebase (angularfire2) 应用程序中，我想要为每个集合元素返回文档。为此，我使用 Observables + .subscribe()。但我想使用 RXJS 和 AsyncPipe 获得替代方案。

我尝试使用下一个 RXJS 链：

this.shortlisted$ = this.db.collection(`interestingStartups`).valueChanges().pipe(mergeMap(actions => actions.map(el => {
 return this.db.doc(`startups/${(<any>el).startupUid}`).valueChanges().pipe(mergeMap(el => of([el])));
})));

并*ngFor="let s of shortlisted$ | async"在 HTML 模板中使用。但它不起作用。Angular 显示下一个错误“找不到类型为 'object' 的不同支持对象 '[object Object]'。NgFor 仅支持绑定到 Iterables，例如数组”

我当前的代码（Observables + .subscribe）有效： 

this.db.collection('interestingStartups').valueChanges().subscribe((el:any) => {
 el.forEach(is => {
  this.db.doc('startups/' + is.startupUid).get().subscribe(s => {
   this.shortlisted.push(s.data());
  })
 })        
});

我只使用*ngFor没有 AsyncPipe 的纯，即*ngFor="let s of shortlisted"

我想将结果分配给使用类似或类似的this.shortlistedRXJS 运算符。mergeMap目前我无法为此找到可行的解决方案

请帮忙！

标签： angularfirebaserxjsangularfire2

解决方案

这个应该可以的。

this.shortlisted$ = this.db.collection('interestingStartups').valueChanges().pipe(
  switchMap(el => combineLatest(
    el.map(is => this.db.doc('startups/' + is.startupUid).get())
  ))
);

它首先获取感兴趣的初创公司列表，然后对于每个初创公司，它都会获取初创公司的文档，并用于combineLatest连接它们。

推荐阅读