Array objet intérieur indéfini après abonnement

Question

J'essaie d'obtenir un élément après plusieurs requêtes http, mais il y a un problème d'asynch que je ne peux pas résoudre. Poster mon code:

fonction Get dans mon service:

get() { 
return new Observable(project => { 
    this.channelsService.get().subscribe(
    stations => { 
     this._stations = stations; 
     this._stations.forEach((station) => { 
     station.cssClass = this.channelsService.getCss(station.id.split('/').pop()); 
     station.plstation$thumbnails = this.channelsService.getThumbnails(station.id.split('/').pop()); 
     if (station.plstation$callSign !== '') { 
      const watchliveUrl = this.watchLiveApi + station.plstation$callSign + '/?schema=1.0.0'; 
      this.http.get(watchliveUrl).subscribe(data => { 
      const body = data.json(); 
      station.currentListing = body.currentListing; 
      station.nextListing = body.nextListing; 
      project.next(stations); 
      project.complete() 
      }); 
     } 
     }); 

    }, (error) => { 
     this.mapErrorService.mapError(error, 'Listing service (1)'); 
    }); 
}); 

}

get() utilisé et abonnez-vous:

constructor(private listingService: ListingService) { 
this.listingService.get().subscribe((stations) => { 
    this.stripDetails.channelList = stations; 
    // stations[6].currentListing Not undefined 
    console.log(stations); 
    // Now is undefined 
    console.log(stations[6].currentListing); 

}); } 

Comment définir les stations [6] .currentListing ?

Answer 1

Vous transformez la Observable de http.get() en Promise, mais vous ne faites rien avec ce Promise. Donc, bien que stations soit défini, le Promise ne sera pas terminé, donc l'attribut currentListing ne sera pas défini. Lorsque vous utilisez un observable ou une promesse, vous devez toujours attendre le résultat. Donc, dans ce cas, si vous voulez utiliser des promesses, vous devez les rassembler tous et ne pas sortir project jusqu'à ce qu'ils aient tous terminé.

Quelque chose comme:

get() { 
return new Observable(project => { 
    this.channelsService.get().subscribe(
    stations => { 
     this._stations = stations; 
     let responses = this._stations.map((station) => { 
     station.cssClass = this.channelsService.getCss(station.id.split('/').pop()); 
     station.plstation$thumbnails = this.channelsService.getThumbnails(station.id.split('/').pop()); 
     if (station.plstation$callSign !== '') { 
      const watchliveUrl = this.watchLiveApi + station.plstation$callSign + '/?schema=1.0.0'; 
      return this.http.get(watchliveUrl).map(data => { 
      const body = data.json(); 
      station.currentListing = body.currentListing; 
      station.nextListing = body.nextListing; 
      }); 
     } 
     }); 
     // Wait for all requests to complete. 
     Rx.Observable.forkJoin(...responses).subscribe(() => { 
      project.next(stations); 
      project.complete() 
     }); 

    }, (error) => { 
     this.mapErrorService.mapError(error, 'Listing service (1)'); 
    }); 
});