javascript - * ngFor当给定类型为Observable的数组时，无法读取未定义的 'subscribe'属性

这很简单，所以我不确定为什么它不起作用。

我有一项服务使我可以观察到。
我有几个有助于它的rxjs流，如下所示:

search(searchTerm: string {

  this.searchStream = this.http.get("${this.baseUrl}searchq=${searchTerm}");

  this.resultStream = this.searchStream.map(
    data => {
      let obj = data.json();
      return {
        artists: obj.artists.items,
        albums: obj.albums.items,
        tracks: obj.tracks.items
      };
    },
    err => console.error(err),
    () => console.log('getRepos completed')
  );

  this.albumSearchStream = this.resultStream.map(
    searchResults => {
      console.log("mapping albums");
      return searchResults.albums
    },
    err => console.log("unable to get albums")
  );
  this.albumSearchStream.subscribe(
    albums => console.log(albums)
  );
}

长话短说，在请求 albumSearchStream 后，将获得类型的数组EnvAlbum 。

这一切都是在Search服务中发生的。

该服务正在注入(inject)到我的Page Controller 中，并且正在构造函数中

this.albumResults = this.spotifyService.albumSearchStream;

其中 albumResults的将为。可观察到的EnvAlbum [] 类型。

然后在模板中，我对这个可观察的对象使用基本的ngFor，如下所示:

<ion-card *ngFor="let result of albumResults | async" >
        <ion-card-header>
            {{ result }}
        </ion-card-header>
    </ion-card>

但是，然后出现以下错误:


对于为什么会发生此错误，我深感困惑。

注意:在订阅时，它正确地输出对象数组

最佳答案

我认为albumResults不是组件的属性(它将是未定义的)的问题，因此async管道无法对其进行订阅。单击触发search方法时似乎已设置好...

您可以尝试使用经过修饰的表达式将ngFor包装在ngIf中

<template [ngIf]="albumResults"> <------
  <ion-card *ngFor="let result of albumResults | async" >
    <ion-card-header>
      {{ result }}
    </ion-card-header>
  </ion-card>
</template>

或使用假的Observable初始化albumResults。

编辑

我将以这种方式重构您的服务代码:

albumResults =新的Subject();

search(searchTerm: string) {
  this.searchStream = this.http.get(...);

  this.resultStream = this.searchStream.map(
    data => {
      let obj = data/*.json()*/;
      return {
        artists: obj.artists.items,
        albums: obj.albums.items,
        tracks: obj.tracks.items
      };
    }
  );

  this.albumSearchStream = this.resultStream.map(
    searchResults => {
      return searchResults.albums
    }
  );
  this.albumSearchStream.subscribe(
    albums => {
      this.albumResults.next(albums);
    }
  );
}

并通过以下方式在您的组件中设置albumResults属性:

constructor(private spotifyService:SpotifyService) {
  this.albumResults = this.spotifyService.albumResults;
}

参见以下代码:https://plnkr.co/edit/IrsZ9P3wff2YXyjRRGTw?p=preview。