Merangkai RxJS Dapat diamati dari data http di Angular2 dengan TypeScript

Saat ini saya mencoba mempelajari Angular2 dan TypeScript sendiri setelah bekerja dengan senang hati dengan AngularJS 1. * selama 4 tahun terakhir! Saya harus mengakui bahwa saya membencinya tetapi saya yakin momen eureka saya sudah dekat ... bagaimanapun, saya telah menulis layanan di aplikasi dummy saya yang akan mengambil data http dari backend palsu yang saya tulis yang melayani 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');
    }   
}

Sekarang dalam sebuah Komponen saya ingin menjalankan (atau merangkai) keduanya getUserInfo()dan getUserPhotos(myId)metode. Di AngularJS ini mudah karena di controller saya, saya akan melakukan sesuatu seperti ini untuk menghindari "Pyramid of doom" ...

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

Sekarang saya telah mencoba melakukan sesuatu yang serupa di komponen saya (mengganti .thenuntuk .subscribe) namun konsol kesalahan saya menjadi gila!

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

}

Saya jelas melakukan sesuatu yang salah ... bagaimana cara terbaik saya dengan Observables dan RxJS? Maaf jika saya mengajukan pertanyaan bodoh ... tapi terima kasih atas bantuannya sebelumnya! Saya juga memperhatikan kode berulang dalam fungsi saya saat mendeklarasikan header http saya ...

Untuk kasus penggunaan Anda, menurut saya flatMapoperator adalah yang Anda butuhkan:

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

Dengan cara ini, Anda akan menjalankan permintaan kedua setelah yang pertama diterima. The flatMapOperator ini sangat berguna ketika Anda ingin menggunakan hasil dari permintaan sebelumnya (event sebelumnya) untuk mengeksekusi satu sama lain. Jangan lupa untuk mengimpor operator agar dapat menggunakannya:

import 'rxjs/add/operator/flatMap';

Jawaban ini bisa memberi Anda lebih banyak detail:

• HTTP GET Angular dengan kesalahan TypeScript http.get (...). Map bukan fungsi di [null]

Jika Anda hanya ingin menggunakan subscribemetode, Anda menggunakan sesuatu seperti itu:

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

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

Untuk menyelesaikannya, jika Anda ingin mengeksekusi kedua permintaan secara paralel dan diberi tahu ketika semua hasil sudah tersedia, Anda harus mempertimbangkan untuk menggunakan Observable.forkJoin(Anda perlu menambahkan import 'rxjs/add/observable/forkJoin'):

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