Question

我使用Angular 2并尝试对数组元素进行一些过滤，然后再在页面上查看它们。该服务通过此调用返回一些玩家的列表：

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

据我所知，这会返回一个ArrayObservable对象。

这就是我在组件中使用服务的方式：

this.svc.getPlayers(this.position)
  .subscribe(p => this.players = p); // this.players is Array<Player>

我从服务获得的数据形状为：

{
  "success": true,
  "data": [
   ...
  ]
}

所有这些步骤之后，我得到以下错误：

无法找到不同的支持对象＆＃39; [object Object]＆＃39;类型＆＃39;玩家1＆＃39;。 NgFor仅支持绑定到诸如Arrays之类的Iterables。

那么这里发生了什么？

Answer 1

Cannot find a differ supporting object '[object Object]' of type 'Player 1'. NgFor only supports binding to Iterables such as Arrays.

这意味着您将* ngFor绑定到对象而不是数组。查看HTTP调用，返回一个数组的Observable，而不是一个数组。

        .map(r => Observable.from(r.data))

将此行更改为

        .map(r => r.data)

.map()已经返回一个Observable，你不需要再次将结果包装在Observable中。

无法绑定到Observable数组

1 个答案: