AngularFirestore如何同时订阅父集合tables与子集合orders实时变更

场景说明 #

现有父集合 tables，其下每个文档都附带名为 orders 的子集合，需要在订阅tables集合的同时监听所有关联orders的变更，满足以下要求：

• 获取tables数据的同时同步拿到对应orders数据
• 可展开行数据表的table渲染状态依赖orders状态，需要实时感知orders变更

原有实现核心问题 #

1. 使用zip组合多个orders订阅流不符合需求：zip需要等待所有传入流都发射值才会输出组合结果，且仅当所有流都同步发射新值时才会更新，单个订单变更不会触发整体数据推送，无法满足实时性要求。
2. 使用mergeMap处理tables流会导致内存泄漏：当tables集合发生增删改时，旧的orders订阅不会被自动取消，会持续监听产生无效回调。
3. 返回数据结构未做映射，需要额外手动解构才能将订单关联到对应桌台，使用成本高。

修正后实现 #

tables服务代码 #

import { switchMap, map } from 'rxjs/operators';
// 其余原有依赖保持不变

watchTables(): Observable<any> {
  return this.afStore
    .collection('restaurants')
    .doc(this.rid)
    .collection('tables')
    .snapshotChanges()
    .pipe(
      map((snapshots: any) =>
        snapshots.map((doc: any) => ({
          id: doc.payload.doc.id,
          ...doc.payload.doc.data()
        })).sort((a: any, b: any) => a.number - b.number)
      ),
      // switchMap会在tables列表变更时自动取消上一轮所有orders订阅，避免内存泄漏
      switchMap((tables: any) => this.ordersService.watchOrders(tables))
    );
}

orders服务代码 #

import { of } from 'rxjs';
import { combineLatest, map } from 'rxjs/operators';
// 其余原有依赖保持不变

watchOrders(tables: any): Observable<any> {
  // 无桌台时直接返回空数组，避免combineLatest传入空数组报错
  if (!tables.length) return of([]);

  const orderStreams = tables.map((table: any) =>
    this.afStore
      .collection('restaurants')
      .doc(this.rid)
      .collection('tables')
      .doc(table.id)
      .collection('orders')
      .snapshotChanges()
      .pipe(
        map((snapshots: any) => 
          snapshots.map((doc: any) => ({
            id: doc.payload.doc.id,
            ...doc.payload.doc.data()
          })).sort((a: any, b: any) => this.sortOrders(a, b))
        ),
        // 直接把订单数据挂载到对应桌台对象上，无需后续手动解构
        map(orders => ({ ...table, orders }))
      )
  );

  // combineLatest会在任意一个订单流更新时，推送所有流的最新值组合
  return combineLatest(orderStreams);
}

组件调用 #

subscribeToTables() {
  this.tablesService
    .watchTables()
    .subscribe((tableList) => {
      // tableList为桌台数组，每个元素自带orders属性，可直接绑定给可展开表格数据源
      this.dataSource.data = tableList;
      console.log('table/orders数据变更', tableList);
    });
}

方案说明 #

• 不需要将orders冗余存储到table文档中，子集合独立监听是Firestore推荐的范式化存储方案，数据一致性更好，无冗余写入成本。
• 所有订阅的生命周期由RxJS流自动管理，桌台增删时旧的订单监听会自动取消，无内存泄漏风险。
• 任意桌台的订单发生新增/修改/删除时，都会立刻推送最新的全量关联数据，满足表格实时渲染要求。
• 返回数据结构直接适配可展开表格的入参要求，不需要额外做数据转换。

内容的提问来源于stack exchange，提问作者Iván Del Río Ruger