I can't figure out why this isn't working, even though it seems straightforward.
I'm using a service that gives me an observable. There are a few rxjs streams connected to it in the following way:
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)
);
}
In short, after a request, the albumSearchStream receives an array of type EnvAlbum.
All of this is happening within a Search service.
This service is injected into my Page controller, and in the constructor, I have the following code:
this.albumResults = this.spotifyService.albumSearchStream;
where albumResults will be an Observable of type EnvAlbum[].
Then in the template, I use ngFor on this observable like this:
<ion-card *ngFor="let result of albumResults | async" >
<ion-card-header>
{{ result }}
</ion-card-header>
</ion-card>
However, I encounter the following error: https://i.sstatic.net/MGQTK.png
I'm completely puzzled as to why this error is happening.
Note: When subscribed, it correctly outputs an array of objects