無法綁定到可觀察陣列

我正在使用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，而這個問題並非如此。 –

無法綁定到可觀察陣列

回答

相關問題