无法绑定到可观察阵列

我正在使用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": [ 
    ... 
    ] 
}

所以经过所有这些步骤，我得到错误如下：

无法找到类型为'Player 1'的不同支持对象'[object Object]'。 NgFor仅支持与阵列等Iterables绑定。

那么这里发生了什么？

来源

2016-09-27 Élodie Petit

你为什么映射到'Observable.from（r.data）'？ – rinukkusu

你可以发布你的html代码吗？ –

@AlexanderCiesielski是对的。由于'.map（r => Observable.from（r.data））'，您意外地将'Observable'分配给'this.players'。 – martin

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

这意味着你要绑定你的* ngFor一个对象，而不是一个数组。看看你的HTTP调用，你返回一个数组的Observable，而不是一个Array。

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

更改此行

 .map(r => r.data)

.map()已经返回可观察到的，则不需要再次包装的结果可观察到的。

来源

2016-09-27 12:29:22

可以使用“异步”管道将模板绑定到模板中。 – Brad

是的，但是'async' pipe的全部意思就是忽略订阅和取消订阅/ form observables，而这个问题并非如此。 –

无法绑定到可观察阵列

回答

相关问题