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

Question

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

我有一个服务给我一个 observable。 我有几个 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 的数组。

这一切都发生在搜索服务中。

这个服务被注入(inject)到我的页面 Controller 中，并且在我正在做的构造函数中

this.albumResults = this.spotifyService.albumSearchStream;

albumResults 将成为类型为 EnvAlbum[] 的 Observable。

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

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

但是，我得到以下错误:

对于为什么会发生此错误，我感到非常难过。

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

Answer 1

我认为 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 = new 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 .