* ngFor Kann die Eigenschaft 'subscribe' von undefined nicht lesen, wenn ein Observable vom Typ array angegeben wurde

Question

Das ist ziemlich einfach, also bin ich mir nicht sicher, warum es nicht funktioniert.

Ich habe einen Service, der mir eine beobachtbare gibt. Ich habe ein paar rxjs Ströme, die wie so dazu beitragen:

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) 
); 
} 

Lange Rede kurzer Sinn, nach einer Anfrage der albumSearchStream ein Array vom Typ EnvAlbum bekommt.

Dies geschieht alles innerhalb eines Dienstes auf der Suche.

Dieser Dienst in meine Seite Controller wird injiziert und in den Konstruktor ich

tue

this.albumResults = this.spotifyService.albumSearchStream; 

wo albumResults sein beobachtbare vom Typ EnvAlbum [] wird.

Dann in der Vorlage ich wie so auf diesen beobachtbaren einen Grund ngFor bin mit:

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

aber dann bekomme ich folgende Fehlermeldung:

ich darüber hinaus, warum dies stapfte bin Fehler tritt auf.

NB: Auf abonniert, sie richtig ein Array von Objekten ausgeben

Answer 1

denke ich das Problem, dass albumResults nicht eine Eigenschaft Ihrer Komponente ist am Anfang (es wird nicht definiert werden), so dass das async Rohr kann nicht abonnieren. Es scheint, festgelegt werden, wenn Sie auf die search Methode auszulösen ...

Sie könnten versuchen, die ngFor innerhalb eines ngIf mit dem entzuckert Ausdruck zu wickeln

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

oder die albumResults mit einem gefälschten beobachtbaren initialisieren.

bearbeiten

ich Ihren Service-Code auf diese Weise umgestalten würde:

albumResults = new Gegenstand();

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); 
    } 
); 
} 

und stellen Sie die albumResults Eigenschaft in Ihrer Komponente auf diese Weise:

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

dieses plunkr Siehe: https://plnkr.co/edit/IrsZ9P3wff2YXyjRRGTw?p=preview.