如何使用 rxjs 加入两个集合？答案

【问题标题】：How to join two collections using rxjs?如何使用 rxjs 加入两个集合？
【发布时间】：2021-07-21 22:35:59
【问题描述】：

我有两个必须由 id 连接的集合（令牌和趋势），这样每个返回的项目都由来自令牌和趋势集合的文档组成（趋势项目的 id 等于令牌项目的 id )。

为了合并文档，我创建了以下函数：

export interface TokenData {
    created_utc: number;
    image: string;
    name: string;
}

export interface usersCount {
    subscribers: number;
    visitors: number;
    timestamp: number;
}

export interface TrendData {
    tokenInfo: TokenData;
    users_count: usersCount[];
}

getTrends(): Observable<TrendData[]> {
      const tokens = this.db.collection<TrendData>('tokens').snapshotChanges()
      .pipe(map(docArray => {
        return docArray.map(doc => {
          const data: any = doc.payload.doc.data();
          return {
            id: doc.payload.doc.id,
            ...data
          };
        });
      }));
      const trends = this.db.collection<TrendData>('trends').snapshotChanges()
      .pipe(map(docArray => {
        return docArray.map(doc => {
          const data: any = doc.payload.doc.data();
          return {
            id: doc.payload.doc.id,
            ...data
          };
        });
      }));
      const fj = forkJoin({
        tokens: tokens,
        trends: trends
      });
      return fj.pipe(map(items => {
        return items.trends.map(trendItem => {
          return {
            tokenInfo: items.tokens.find(({id}) => id === trendItem.id),
            users_count: trendItem
          }
        })
      }))
    }

一般来说，我想加入两个 firestore 集合，但当前函数不返回任何内容，所以我不确定 forkJoin 是否是正确的运算符，或者是否有任何其他问题阻止订阅的函数检索数据。

【问题讨论】：

fj.pipe( 缺少结尾 )。不是缺少逗号，而是解析器遇到了}，否则它会期望, 或)。

标签： typescript firebase google-cloud-firestore rxjs

【解决方案1】：

通过使用 combineLatest 而不是 forkJoin，我让它工作了：

getTrends(): Observable<TrendData[]> {
      const tokens = this.db.collection<TrendData>('tokens').snapshotChanges()
      .pipe(map(docArray => {
        return docArray.map(doc => {
          const data: any = doc.payload.doc.data();
          return {
            id: doc.payload.doc.id,
            ...data
          };
        });
      }));
      const trends = this.db.collection<TrendData>('trends').snapshotChanges()
      .pipe(map(docArray => {
        return docArray.map(doc => {
          const data: any = doc.payload.doc.data();
          return {
            id: doc.payload.doc.id,
            ...data
          };
        });
      }));
      const merged = combineLatest([tokens, trends]).pipe(
        map(([tokens, trends]) => {
          return trends.map(trendItem => {
            return {
              tokenInfo: tokens.find(({id}) => id === trendItem.id),
              users_count: trendItem
            }
          })
        })
        )
      return merged;
    }

【讨论】：