Chaînage d'observables RxJS à partir de données http dans Angular2 avec TypeScript

J'essaie actuellement de m'enseigner Angular2 et TypeScript après avoir travaillé avec bonheur avec AngularJS 1. * pendant les 4 dernières années! Je dois admettre que je déteste ça, mais je suis sûr que mon moment eureka est juste au coin de la rue ... de toute façon, j'ai écrit un service dans mon application factice qui récupérera les données http d'un faux backend que j'ai écrit et qui sert JSON.

import {Injectable} from 'angular2/core';
import {Http, Headers, Response} from 'angular2/http';
import {Observable} from 'rxjs';

@Injectable()
export class UserData {

    constructor(public http: Http) {
    }

    getUserStatus(): any {
        var headers = new Headers();
        headers.append('Content-Type', 'application/json');
        return this.http.get('/restservice/userstatus', {headers: headers})
            .map((data: any) => data.json())
            .catch(this.handleError);
    }

    getUserInfo(): any {
        var headers = new Headers();
        headers.append('Content-Type', 'application/json');
        return this.http.get('/restservice/profile/info', {headers: headers})
            .map((data: any) => data.json())
            .catch(this.handleError);
    }

    getUserPhotos(myId): any {
        var headers = new Headers();
        headers.append('Content-Type', 'application/json');
        return this.http.get(`restservice/profile/pictures/overview/${ myId }`, {headers: headers})
            .map((data: any) => data.json())
            .catch(this.handleError);
    }

    private handleError(error: Response) {
        // just logging to the console for now...
        console.error(error);
        return Observable.throw(error.json().error || 'Server error');
    }   
}

Maintenant dans un composant, je souhaite exécuter (ou enchaîner) les deux méthodes getUserInfo()et getUserPhotos(myId). Dans AngularJS, c'était facile car dans mon contrôleur, je ferais quelque chose comme ça pour éviter la "Pyramid of doom" ...

// Good old AngularJS 1.*
UserData.getUserInfo().then(function(resp) {
    return UserData.getUserPhotos(resp.UserId);
}).then(function (resp) {
    // do more stuff...
}); 

Maintenant, j'ai essayé de faire quelque chose de similaire dans mon composant (en remplaçant .thenpour .subscribe) mais ma console d'erreur devient folle!

@Component({
    selector: 'profile',
    template: require('app/components/profile/profile.html'),
    providers: [],
    directives: [],
    pipes: []
})
export class Profile implements OnInit {

    userPhotos: any;
    userInfo: any;

    // UserData is my service
    constructor(private userData: UserData) {
    }

    ngOnInit() {

        // I need to pass my own ID here...
        this.userData.getUserPhotos('123456') // ToDo: Get this from parent or UserData Service
            .subscribe(
            (data) => {
                this.userPhotos = data;
            }
        ).getUserInfo().subscribe(
            (data) => {
                this.userInfo = data;
            });
    }

}

Je fais évidemment quelque chose de mal ... comment pourrais-je mieux avec Observables et RxJS? Désolé si je pose des questions stupides ... mais merci pour l'aide d'avance! J'ai également remarqué le code répété dans mes fonctions lors de la déclaration de mes en-têtes http ...

Pour votre cas d'utilisation, je pense que l' flatMapopérateur est ce dont vous avez besoin:

this.userData.getUserPhotos('123456').flatMap(data => {
  this.userPhotos = data;
  return this.userData.getUserInfo();
}).subscribe(data => {
  this.userInfo = data;
});

De cette façon, vous exécuterez la deuxième demande une fois la première reçue. L' flatMapopérateur est particulièrement utile lorsque vous souhaitez utiliser le résultat de la requête précédente (événement précédent) pour en exécuter une autre. N'oubliez pas d'importer l'opérateur pour pouvoir l'utiliser:

import 'rxjs/add/operator/flatMap';

Cette réponse pourrait vous donner plus de détails:

• Angular HTTP GET avec erreur TypeScript http.get (...). Map n'est pas une fonction dans [null]

Si vous ne voulez utiliser que la subscribeméthode, vous utilisez quelque chose comme ça:

this.userData.getUserPhotos('123456')
    .subscribe(
      (data) => {
        this.userPhotos = data;

        this.userData.getUserInfo().subscribe(
          (data) => {
            this.userInfo = data;
          });
      });

Pour finir, si vous souhaitez exécuter les deux requêtes en parallèle et être averti lorsque tous les résultats sont alors, vous devez envisager d'utiliser Observable.forkJoin(vous devez ajouter import 'rxjs/add/observable/forkJoin'):

Observable.forkJoin([
  this.userData.getUserPhotos(),
  this.userData.getUserInfo()]).subscribe(t=> {
    var firstResult = t[0];
    var secondResult = t[1];
});