Question

以下是从REST服务获取数据的代码段：

getPlayers(position: string) {
    return this.get(`players/${position}`)
        .map(r => r.data)
        .catch(error => {
            console.log('Error: ', error);
            return Observable.of<Player>();
        });
}

r.data 是一系列玩家。

这是我定义将保存对上述服务返回的引用的变量的方式：

  players: Observable<Player>;

最后，这是我分配球员的方式：

this.players = this.svc.getPlayers(this.position);

这就是我列出组件中玩家的方式：

<ion-item *ngFor="let player of players | async">
  {{player.name}}-{{player.position}}
</ion-item>

一切都按预期工作。现在我想在显示组件之前过滤玩家，我尝试这样的事情;

this.players = this.svc.getPlayers(this.position).filter(p => p.position === 'hq');

...我在屏幕上看不到任何内容，好像我没有任何记录要显示。没有任何可观察的方法似乎正常工作。

任何想法为什么？

Answer 1

尝试使用以下内容来应用过滤器：

按以下方式更改您的服务：

getPlayers(position: string) {
    return this.get(`players/${position}`)
        .map(r => r.json())
        .catch(error => {
            console.log('Error: ', error);
            return [];
        });
}

//在你的组件中：

players: Player[];

//Call your service to get data and remove async pipe from HTML
this.svc.getPlayers(this.position).subscribe(res => {
  this.players = (res.data.length) ? res.data.filter(p => p.position === 'hq'):[];
});

Answer 2

.map(r => r.data.filter(p => p.position === 'hq'))

this.players = this.svc.getPlayers(this.position);

无法在Angular2上过滤RxJS Observable

2 个答案: