Question

我正在学习Angular和RxJS运算符。我正在使用Hearthstone 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 });
  }
}

Answer 1

如果可观察到的流返回类型是数组，那么流中的项就是数组。过滤器管道操作员将过滤流中的项目。您的问题来自在过滤器输入上放置任何类型-移除，并且应该是card []类型。然后，您尝试从数组中提取属性。

Answer 2

您的getCards方法将返回Observable<Card[]>，因此这意味着它返回了一个Observable，它发出了一系列Cards。在这种情况下，您的Observable将发出一个值，然后完成。

filter可观察的运算符与filter原型上的Array方法不同。可观察的filter将过滤来自源Observable的排放物，并且实际上不会更改每个排放物中的数据。您正在(el: any)方法中明确输入filter；永远不要在委托方法中完成此操作，而应从Observable本身隐式将其键入为Card。这就是为什么您的filter方法最初不会编译的原因。

由于我们不想过滤出发出了什么，而是想更改每次发射的 value ，因此我们将使用map代替：

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

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

我在做错RxJS运算符

2 个答案: