Angular合并Observable订阅结果问题：Firestore多请求仅显示最后一项

问题原因 #

当前代码每次订阅getEvaluatorSaaSRequests返回的Observable时，直接用this.demandesSaaSEvaluator = ...覆盖数组内容，导致前序请求结果被后续请求覆盖，最终仅显示最后一次请求的数据。

解决方案 #

使用RxJS操作符将Promise转为Observable，并行处理所有nomBu对应的请求，合并所有结果后再赋值给数组，避免覆盖。

修改后的组件代码 #

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

// ...

demandesSaaSEvaluator: Demande[] = [];

// 链式处理请求，合并所有结果
from(this.fire.collection('businessUnit').where('evaluators', 'array-contains', this.auth.currentUserEmail).get())
  .pipe(
    // 从查询快照中提取所有匹配的nomBu
    map(snapshot => snapshot.docs.map(doc => doc.data().nomBu)),
    // 为每个nomBu创建请求Observable，并行执行
    switchMap(nomBus => {
      const requestObservables = nomBus.map(nomBu => 
        this.service.getEvaluatorSaaSRequests(nomBu).pipe(
          // 将每个快照结果转换为Demande数组
          map(actionArray => actionArray.map(item => ({
            id: item.payload.doc.id,
            ...(item.payload.doc.data() as object)
          } as Demande)))
        )
      );
      // 等待所有请求完成，返回所有结果数组
      return forkJoin(requestObservables);
    }),
    // 将二维结果数组合并为一维数组
    map(allDemandesArrays => allDemandesArrays.flat())
  )
  .subscribe(combinedDemandes => {
    this.demandesSaaSEvaluator = combinedDemandes;
  });

关键操作符说明 #

• from: 将Firestore的Promise查询结果转为Observable，支持RxJS链式操作。
• switchMap: 接收上一步的nomBu数组，转换为多个请求Observable的集合。
• forkJoin: 并行执行所有Observable，等待全部完成后返回每个请求的结果数组（适用于一次性获取数据的场景）。
• flat(): 将多个Demande数组合并为一个大数组，方便HTML循环展示。

实时更新场景适配 #

如果需要实时监听所有nomBu对应集合的变化（snapshotChanges会推送更新），将forkJoin替换为combineLatest，这样任何一个集合的数据变化都会触发整体数组更新：

// 导入combineLatest
import { combineLatest } from 'rxjs';

// ...

switchMap(nomBus => {
  const requestObservables = nomBus.map(nomBu => 
    this.service.getEvaluatorSaaSRequests(nomBu).pipe(
      map(actionArray => actionArray.map(item => ({
        id: item.payload.doc.id,
        ...(item.payload.doc.data() as object)
      } as Demande)))
    )
  );
  // 改用combineLatest监听所有Observable的实时变化
  return combineLatest(requestObservables);
}),
map(allDemandesArrays => allDemandesArrays.flat())

注意事项 #

• 确保已导入所需的RxJS操作符，避免编译错误。
• 若nomBu数量较多，需注意Firestore的并发请求限制，必要时可调整为串行请求（如使用concatMap+toArray）。

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