将 rxjs 与 http observable 一起使用时遇到问题

【问题标题】：trouble using rxjs with http observable将 rxjs 与 http observable 一起使用时遇到问题
【发布时间】：2026-01-17 23:25:02
【问题描述】：

我正在做一个简单的 http 调用并获取一个对象数组

getFruit():Observable<Fruit[]> {
    return this.http.get<Fruit[]>(URL);
}

水果对象是

export class Fruit {
    public name: string;
    public color: string;
}

当我尝试在管道中分组或做任何事情时，问题代码如下：

fruitService.getFruit().pipe(
  groupBy(f => f.color),
  mergeMap(group => group.pipe(toArray()))
);

但是当我尝试使用 rxjs groupBy 时出现错误；

Property 'color' does not exist on type 'Fruit[]'

【问题讨论】：

我想按颜色对结果进行分组

标签： angular rxjs observable angular9 mergemap

【解决方案1】：

groupBy作用于每个发出的值，当你使用http客户端时，它会发出一个值，一个数组，而它自己的数组没有颜色属性

如果您希望按颜色对结果进行分组，您只需像使用任何数组一样映射它。

一种方法是使用Array.reduce，例如：

this.fruits$ = this.fruitService.getFruit().pipe(
  map(fruits => {
    const key = 'color';

    return fruits.reduce((allFruits, fruit) => {
        (allFruits[fruit[key]] = allFruits[fruit[key]] || []).push(fruit);
        return allFruits;
      }, {});
  })  
)

stackblitz live example

*从here复制reduce实现

【讨论】：