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

Posted 2023-03-13

【中文标题】如何使用 rxjs 加入两个集合？

【英文标题】：How to join two collections using 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( 缺少结尾 )。不是缺少逗号，而是解析器遇到了，否则它会期望, 或)。

【参考方案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;