将 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 live example

*从 here

复制 reduce 实现

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

trouble using rxjs with http observable

observable

rxjs

angular

mergemap

angular9