Angular 如何在RxJS的GroupBy中使用分组键，

我有API返回的结构

这是签名

methodApi(): Observable(Array<MyClass>)

我想按parentId对其进行分组

methodApi()
.pipe(groupby((x: MyClass[] => ...))) // THERE
.subscribe(x => console.log(x));

MethodApi返回可观察的，在'groupby'方法中作为输入参数，我有数组，所以我不能引用parentId属性。当我将输入参数更改为MyClass时，会出现编译错误

如何解决此分组？

---

我将Angular 9.0与RxJS 6.5.5一起使用

您必须使用中的从阵列中创建另一个可观察流，然后使用分组比，然后将其转换回结果阵列：

methodApi().pipe(
  concatMap((result) => from(result)),
  groupBy((item) => item.parentId),
  mergeMap(group => group.pipe(toArray()))
).subscribe(x => console.log(x));

您还可以使用

mergeAll

：

methodApi().pipe(
  mergeAll(),
  groupBy((item) => item.parentId),
  mergeMap(group => group.pipe(toArray()))
).subscribe(x => console.log(x));

---

使用下面的

groupBy

操作符应该很简单

methodApi().pipe(
  groupBy((item) => item.parentId),
  mergeMap(group => group.pipe(toArray()))
).subscribe(console.log) // should get you an array with groupBy parentId

---

这不是RxJs group by操作符的工作方式。RxJs操作符对流发出的对象进行分组，您希望对流发出的数组中的项进行分组。您需要一个作用于数组而不是可观察对象的group by函数。您可以使用一个简单的reduce将它们全部分组到一个以parentId为键的对象

methodApi()
.pipe(map(results => results.reduce(
  (group, item) => {
    if (group[item.parentId]) {
      group[item.parentId].push(item);
    } else {
      group[item.parentId] = [item];
    }
    return group;
  }, {})
)).subscribe(group => {});

---

这就是GROUPBY操作符的设计用途，但OP的功能是发射单个对象数组。它不是发射多个可分组对象的流。OP需要一个将数组分组的函数，而不是可观察的。

methodApi()
.pipe(map(results => results.reduce(
  (group, item) => {
    if (group[item.parentId]) {
      group[item.parentId].push(item);
    } else {
      group[item.parentId] = [item];
    }
    return group;
  }, {})
)).subscribe(group => {});