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

Question

我正在做一个简单的 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[]'

Answer 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 实例

*从这里复制reduce实现