迭代订阅者

Question

我在理解观察者/订阅者模型和遍历该模型时遇到了一些问题 return。

所以我有一个鸡尾酒组件，它可以抓取一系列鸡尾酒对象。

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">

我刚收到一个错误。我如何订阅并循环浏览 return?

我得到的错误是：

core.umd.js:3004 EXCEPTION: Error in app/cocktail.template.html:3:5 caused by: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Answer 1

如果你 .subscribe() 你得到一个 Subscription 与 |async 不兼容，因为它无法订阅。
例如，如果您使用 .map()，您会得到一个 Observable，您可以将其与 | async

一起使用

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

Answer 2

为您的 json 结果集创建一个接口，并像这样将其映射到服务中。

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

并在组件中创建该接口的类型，并使用它来映射来自服务的响应，如下面的代码。

cocktails: ICocktail[];

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

希望对您有所帮助！

迭代订阅者

Iterate over subscriber

rxjs

ngfor

angular