遍歷訂閱者

Question

我在理解觀察者/訂閱者模型和循環返回時遇到了一些問題。

所以我有一個雞尾酒組件抓住一系列雞尾酒對象。

的cocktail.service.ts核心：

constructor(private _http: Http) { 

} 
// Returns an array of cocktail objects, using .map to json them 
getCocktails() { 
    return this._http.get(this._geturl) 
     .map(res => res.json()); 
} 

和cocktail.component.ts相關位：

// Calls the cocktail service and gets the json array 
constructor(private _cocktailService: CocktailService) { 
    this.cocktails = _cocktailService.getCocktails(); 
} 

現在我明白了，我可以遍歷cocktails使用：

<li *ngFor="let cocktail of cocktails | async"> 

但我只是想知道我會怎麼做，通過使用訂閱觀察者方法：

constructor(private _cocktailService: CocktailService) { 
    this.cocktails = _cocktailService.getCocktails().subscribe(
     res => this.cocktails = res 
    ); 
} 

現在我不能使用異步管道，因爲本質上，它的認購對我來說，但如果我使用：

<li *ngFor="let cocktail of cocktails"> 

我剛剛得到一個錯誤。我如何訂閱，並循環返回？

我得到的錯誤是：

core.umd.js：3004 EXCEPTION：錯誤在app/cocktail.template.html：3：5 引起的：無法找到一個不同的支持對象'object object]' type'object'。 NgFor僅支持綁定到Iterables，如 陣列。

Answer 1

使用創建界面爲你的JSON結果集，在這樣的服務映射。

return this.http.get(dataUrl) 
.map(response => response.json() as ICocktail[]); 

和在部件創建一種類型的接口，並用它與來自服務如下面碼的響應映射。

cocktails: ICocktail[]; 

this.cocktails = _cocktailService.getCocktails().subscribe(
     res => this.cocktails = res 
    ); 

希望這有助於！

Answer 2

如果你.subscribe()你得到一個Subscription這是不兼容|async，因爲它不能被訂閱。
如果使用例如.map()你得到一個Observable，您可以用| async

constructor(private _cocktailService: CocktailService) { 
    this.cocktails = _cocktailService.getCocktails().map(
     res => this.cocktails = res 
    ); 
}