0

我有一个相当常见的用例。我正在从 FirebaseDatabase 加载一组对象，并从 Firebase Storage 附加图像。

FirebaseDatabase 根据查询返回一个 Observable。每次数据库中的数据发生变化时，Observable 都会发出一个更新的查询结果。我还通过映射到每个条目的 [Domain, ImagePromise] 元组，将来自 Storage api 的 Promise 附加到结果中的每个条目

getDomainObj(){
   return this.af.database.list(this.listRef)
    .map((mps: Domain[]) => 
       mps.map((mp: Domain) =>  
         [mp, this.getImage(mp['$key'])]));
}

两个问题：

  1. 有些国会议员没有图像。
  2. 由于图像不在 firedb 中，因此 observable 不会在图像更改时发出。为了解决这个问题，我添加了一个云功能来在每次图像更新时发送推送通知（在这个问题的范围之外，它可以工作，所以不需要深入探讨）。每个 mp 都是它自己的 PubSub 主题，我们在客户端订阅该主题，并获得一个更新的 Observable，每次上传特定 mp 的图像时都会发出

我通过映射解决它们

this.mpSvc.getDomainObj()
  .map((tupleArray: [Domain, Promise<string>][]) => 
    tupleArray.map(([mp, imageSrcPromise]: [Domain, Promise<string>]) => {
      return [mp, 
           Observable.fromPromise(imageSrcPromise) // get initial image
            .startWith(null) // make sure that it emits at least once
            .concat( // updates
              this.mpSvc.signUpForPictureUpdates(mp['$key'])
              .map(([id, imageSrc]: [string, string]) => imageSrc))

      ];
    })
)

mpSvc.signUpForPictureUpdates返回 domainId-imageSrc 元组的 Observable，每次重新上传域的图像时都会发出

现在的最终目标是拥有一个 [Domain, imageSrc] 数组的 Observable，每当任何一个 Domain 对象更改，或任何 Domain 对象更改，或查询结果更改时，它都会发出.

首先我再次重新映射，而不是发出 [Domain,Observable] 对的数组，而是发出 Observable<[Domain, imageSrc]> 的数组

.map((tupleArray: [Domain, Observable<string>][]) => 
  tupleArray.map(([mp, imageSrcObservable]: [Domain, Observable<string>]) => 
     imageSrcObservable.map((imageSrc: string) => [mp, imageSrc])))

现在我有一组 Observable 对的 Observable。每次域或查询结果发生变化时，父 Observable 都会发出，每次特定域的图像发生变化时，子级都会发出。

最后一步，我将子 observable 组合成一个 observable 并 switchMap 到它。

.switchMap((imageObservables: Observable<[Domain, string]>[]) => 
  Observable.combineLatest(imageObservables)
)

结果被正确订阅（实际上，它通过 ngFor|async 显示在 Angular 模板中，但这也在范围之外）。

不幸的是，结果并非预期的那样。实际上，我有四个来自查询的结果对象，两个带有图像，两个没有。我看到的并不一致——有时两个图像都加载，有时一个，而且大多数情况下都没有。

具体来说，如果我要在末尾添加一条日志记录行，如下所示：

.do(x => console.log('final', x), x => console.error('finalerror', x), () => console.log('finalcomplete'));

我总是在 imageSrc 中得到至少一个带有空值的日志行，但几乎没有额外的行带有已解析的真实 imageSrcs。

在最后一步之前订阅（combineLatest）正确获取所有数据

我究竟做错了什么？

编辑：在对此进行更多研究之后，问题肯定出在combineLatest. 我尝试替换combineLatest它imageObservables[1].map(x=>[x])并且它完美地工作（虽然当然只返回一个值而不是数组。此外，单步执行 combineLatest 导致我进行了一些奇怪的关闭，因为在任何时候都需要关闭什么？

4

1 回答 1

2

好的，我发现了问题。fromPromise如果 Promise 拒绝，将抛出错误。因此，其中一个孩子在getImage没有得到图像时出错，导致combineLatest完成。

我这样修

Observable.fromPromise(imageSrcPromise) // get initial image
.catch(() => Observable.empty()) // <-- fix 
.startWith(null) // and so forth...

这就是为什么有时它会正确发射，有时却没有。如果请求首先加载图像的域对象，它们将显示。如果无图像对象首先返回，则流将结束。

于 2017-05-10T00:34:46.613 回答