如何使用Observable实现Firebase产品与用户数据的内连接？

解决方案 #

可以通过RxJS的switchMap、map和forkJoin操作符组合实现数据合并，修改后的getProductsList方法如下：

import { forkJoin } from 'rxjs';
import { switchMap, map } from 'rxjs/operators';

// ...

getProductsList() {
  // 创建合并产品与用户数据的Observable
  const productsWithUsers$ = this.productsRef.valueChanges().pipe(
    switchMap(products => {
      // 为每个产品生成获取用户并合并数据的Observable
      const productUserObservables = products.map(product => {
        return this.userService.getUserById(product.user).pipe(
          // 将产品数据与用户对象合并，替换原user字段
          map(user => ({
            ...product,
            user: user
          }))
        );
      });
      // 等待所有产品的用户数据都返回后，输出合并后的数组
      return forkJoin(productUserObservables);
    })
  );

  // 订阅结果
  productsWithUsers$.subscribe(
    mergedProducts => console.log('合并后的数据:', mergedProducts),
    error => console.error('数据获取失败:', error),
    () => console.log('数据获取完成')
  );
}

关键逻辑说明： #

1. 获取产品数组：通过this.productsRef.valueChanges()拿到产品列表的Observable。
2. 处理单个产品：用switchMap切换到产品数组的处理逻辑，对每个产品调用userService.getUserById获取对应的用户信息。
3. 合并数据：用map操作符将产品的原始数据与获取到的用户对象合并，把原来的user字段从ID替换为完整的用户对象。
4. 批量处理并返回：用forkJoin等待所有产品的用户数据都请求完成，最终返回一个包含所有合并后产品数据的数组。

内容的提问来源于stack exchange，提问作者Sb Zakaria