如何用RxJS groupBy分组AngularFire Firestore集合？

别担心，刚接触RxJS的时候确实容易被这些操作符绕晕，我来一步步帮你理清思路：

首先，你遇到的核心问题是：AngularFire的snapshotChanges()返回的是一次性发射整个数组的Observable，而RxJS的groupBy是用来处理逐个发射元素的流的，所以直接用groupBy肯定不行。我们需要先把数组拆成单个元素的流，分组后再重新组合成你要的多维数组。

完整代码示例 #

import { map, concatMap, groupBy, mergeMap, toArray } from 'rxjs/operators';
import { AngularFirestore } from '@angular/fire/compat/firestore';
import { Observable } from 'rxjs';

// 假设你的Item接口是这样的
interface Item {
  userId: number;
  color: string;
  id?: string; // 可选，如果你需要文档ID的话
}

// 在你的组件/服务中
getGroupedItems(): Observable<Item[][]> {
  return this.afs.collection<Item>('items').snapshotChanges().pipe(
    // 第一步：把snapshotChanges返回的Action数组转换成Item数组（可包含文档ID）
    map(actions => 
      actions.map(action => ({
        ...action.payload.doc.data() as Item,
        id: action.payload.doc.id // 不需要ID的话可以删除这行
      }))
    ),
    // 第二步：把整个数组拆分成逐个发射元素的Observable流
    concatMap(items => items),
    // 第三步：按userId分组，每个组是一个单独的Observable
    groupBy(item => item.userId),
    // 第四步：把每个分组的元素转换成数组
    mergeMap(group => group.pipe(toArray())),
    // 第五步：把所有分组数组合并成一个大的多维数组
    toArray()
  );
}

分步解释 #

• 第一步（map转换数据）：snapshotChanges()返回的是DocumentChangeAction数组，我们需要把每个Action转换成实际的Item对象，顺便可以带上文档ID方便后续操作。
• 第二步（concatMap拆分数组）：concatMap(items => items)会把数组里的每个元素逐个发射出去，这样后面的groupBy就能处理单个元素了。这里用concatMap是因为数组是同步的，它会按顺序发射元素，效果和mergeMap一致，但更贴合当前场景。
• 第三步（groupBy分组）：现在流里是单个Item元素，groupBy(item => item.userId)会把相同userId的元素分到同一个Observable组里。
• 第四步（mergeMap+toArray处理分组）：每个分组是一个Observable，我们用toArray()把每个分组里的元素转换成数组，再用mergeMap把这些分组数组发射出去。
• 第五步（toArray合并成多维数组）：最后把所有分组数组收集起来，转换成一个包含所有分组的多维数组，这样最终的Observable就会发射[[userId1的所有item], [userId2的所有item], ...]这样的结果。

简化版（非实时场景） #

如果你的场景不需要实时监听Firestore的变化，只是一次性获取数据分组，也可以先把Observable转换成Promise，用普通的JavaScript数组方法分组（比如reduce），这样可能更直观：

async getGroupedItems(): Promise<Item[][]> {
  const actions = await this.afs.collection<Item>('items').snapshotChanges().toPromise();
  const items = actions.map(action => ({
    ...action.payload.doc.data() as Item,
    id: action.payload.doc.id
  }));
  
  // 用reduce实现分组
  const grouped = items.reduce((acc, item) => {
    const existingGroup = acc.find(group => group[0].userId === item.userId);
    if (existingGroup) {
      existingGroup.push(item);
    } else {
      acc.push([item]);
    }
    return acc;
  }, [] as Item[][]);
  
  return grouped;
}

不过还是推荐第一种RxJS的方式，因为它能自动监听Firestore的变化，实时更新分组结果。

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