我在做什么错 RxJS 运算符答案

【问题标题】：what am I doing wrong RxJS operators我在做什么错 RxJS 运算符
【发布时间】：2019-02-19 23:08:59
【问题描述】：

我正在学习 Angular 和 RxJS 运算符。我正在使用炉石 API 来训练它。我究竟做错了什么？我想过滤流以仅返回“萨满”卡。我知道，Api 让我有机会按类获得卡片，但我只想训练 RxJS，所以我正在考虑这个问题。我的 ts 组件：

cards: Card[];

  ngOnInit() {
    this.cardsService.getCards().pipe(
      filter((el: any) => el.playerClass === 'Shaman')
    ).subscribe(res =>
      this.cards = res);
  }

这里是我的服务：

export class CardsService {

  constructor(private http: HttpClient) {
  }

  getCards(): Observable<Card[]> {
    const headers = new HttpHeaders().set('X-RapidAPI-Key', '78976c5326mshb1a81046ad68d52p11b362jsn35ec089dd9db');
    return this.http.get<Card[]>('https://omgvamp-hearthstone-v1.p.rapidapi.com/cards/sets/Basic', { headers });
  }
}

【问题讨论】：

标签： angular http rxjs

【解决方案1】：

如果您的可观察流返回类型是数组，则流中的项目是数组。过滤管道运算符将过滤流中的项目。您的问题来自将任何类型放在过滤器输入上 - 删除，它应该是卡 [] 的类型。然后，您尝试从数组中提取属性。

【讨论】：

【解决方案2】：

您的getCards 方法返回Observable<Card[]>，这意味着它返回一个可发出卡片数组的 Observable。在这种情况下，您的 Observable 将发出一个值然后完成。

filter Observable 运算符不同于Array 原型上的filter 方法。 Observable filter 将过滤来自源 Observable 的 emissions，并且实际上不会更改每个发射中的数据。您在 filter 方法中明确键入 (el: any)；这不应该在委托方法中完成，而应该从 Observable 本身隐式键入为Card。这就是为什么您的 filter 方法最初无法编译的原因。

由于我们不想过滤出 what 被发射，而是想改变每个发射的值，我们将使用 map 代替：

this.cardsService.getCards().pipe(
  map(el => el.filter(s => s.playerClass === 'Shaman'))
).subscribe( // ...

这会改变发射的值（通过在发射数组上使用Array.prototype.filter）。

【讨论】：