地图功能内的Angular Firebase异步

【问题标题】：Angular Firebase async inside map function地图功能内的Angular Firebase异步
【发布时间】：2020-10-03 22:50:07
【问题描述】：

我想在我的地图函数中检索一些异步的东西，但我不明白如何。搜索数据取自 firestore。

问题是我不能使用 async 和 await 来检索 seek async。

这是代码：

public quizes: Observable<JobbyAndSeek[]> = responseQuizes.snapshotChanges().pipe(
  map(actions => actions.map(a => {
    const jobby = a.payload.doc.data() as Jobby;
    const seek = this.userService.getUserById(this.seeker ? jobby.idJobber : jobby.idSeeker) as User;
    const data = new JobbyAndSeek(jobby,seek);
    const id = a.payload.doc.id;
    return { id, ...data };
  }))
);

});

【问题讨论】：

标签： javascript angular typescript firebase google-cloud-firestore

【解决方案1】：

您需要使用switchmap 来处理对内部可过度服务getUserById 的订阅。

这是一个例子，因为你没有提供你的类/接口，我猜到并简化了它们，我还嘲笑 snapshotChanges 表现得像 valueChanges 但你应该能够看到重要的概念，即使用 switchMap 和其他 rxjs 运算符。

https://stackblitz.com/edit/so-switchmap?file=index.ts

quizes: Observable<JobbyAndUser[]> = this.responseQuizes.snapshotChanges().pipe(
   flatMap(jobbys => jobbys),    // map array to single values
   switchMap(jobby =>            // use switchmap to handle subsciption to user service observable
      this.userService.getUserById(jobby.idJobber).pipe(map(user => ({id: jobby.id, user})),
   toArray()),                   // convert from single values back to array
));

【讨论】：