AngularFire中如何将多Observable输出转为数组流适配ngFor？

我明白你的痛点了——你现在通过mergeMap把每个任务ID对应的文档流拆成了单个事件输出，但想要的是每次都能拿到完整的任务数组，这样才能直接用*ngFor循环展示。问题的核心在于你把初始的任务ID数组拆成了单个元素，却没把这些单个任务的流重新组合成数组流。

这里用switchMap配合combineLatest就能完美解决：

import { combineLatest, switchMap, map, startWith } from 'rxjs';

// ...

this.db.collection(`games/${gameId}/missions`).valueChanges().pipe(
  switchMap(missions => {
    // 为每个任务ID创建对应的文档快照流，并转换为带id的数据格式
    const missionDocumentStreams = missions.map(mission => 
      this.db.doc(`missions/${mission.id}`).snapshotChanges().pipe(
        map(action => {
          const missionData = action.payload.data() as any;
          const id = action.payload.id;
          return { id, ...missionData };
        })
      )
    );

    // 用combineLatest组合所有任务流，得到完整的任务数组流
    // 加startWith([])处理空任务列表的情况，避免ngFor报错
    return combineLatest(missionDocumentStreams).pipe(startWith([]));
  })
);

代码解释： #

• switchMap：当games/${gameId}/missions的任务ID数组更新时，会自动取消之前的任务文档流订阅，重新创建新的组合流，避免内存泄漏。
• combineLatest：会监听所有任务文档流的最新值，只要任何一个任务文档更新，就会发出包含所有任务最新数据的数组，完全符合你想要的数组形式输出。
• startWith([])：处理任务ID数组为空的场景，确保订阅后至少能拿到空数组，避免*ngFor因无数据报错。
• 内部的map操作：把Firebase的快照对象转换成更易用的{ id, ...数据 }格式，方便组件直接使用。

这样订阅后，你每次得到的都是完整的任务数组，直接绑定到*ngFor上就可以正常循环展示了～

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