Как получить данные из API, который требует параметров из предыдущего запроса API в Angular 2?

Question

Я пишу простое приложение Angular 2, которое ссылается на API. API имеет конечные точки:

/job/:id

/client/:id

Я хотел бы мое приложение, чтобы отобразить таблицу со следующими данными:

Job name

Job description

Client name

Client email

У меня есть простой компонент для отображения этой информации

import {Component, OnInit} from '@angular/core' 
import {JobService} from './job.service' 

@Component({ 
    selector: 'job', 
    template: ` 
    <table> 
    <tr> 
    <td>Job Name: {{job.name}}</td> 
    <td>Job Description: {{job.description}}</td> 
    <td>Client Name: {{client.name}}</td> 
    <td>Client Email: {{client.email}}</td> 
    </tr> 
    </table>`, 
    providers: [JobService] 
}) 
export class JobComponent{ 
    job = {}; 
    client = {}; 


    constructor(private _jobService: JobService){} 

    ngOnInit(){ 

     this._jobService.getJob(1) 
      .subscribe(job => { 
       this.job = job; 
      }); 

     this._jobService.getClient(this.job.client_id) 
      .subscribe(client => { 
       this.client = client; 
      }); 
    } 
} 

и следующие услуги

import {Http} from '@angular/http' 
import {Injectable} from '@angular/core' 


@Injectable() 
export class JobService { 


    constructor(private _http: Http){ 
    } 

    getJob(id){ 
     return this._http.get(window.__env.apiUrl + 'job/' + id + '/') 
     .map(res => res.json()); 
    } 

    getClient(id){ 
     return this._http.get(window.__env.apiUrl + 'client/' + id + '/') 
     .map(res => res.json()); 
    } 


} 

Это правильно записывает информацию из вызова API задания в таблицу, но возвращает ошибку для информации о клиенте, так как оба вызова API запускаются одновременно, поэтому система еще не получила client_id из вызова API задания. Так что мне интересно, как правильно в Angular сделать второй вызов API после завершения первого.

Для справки ради здесь есть ошибка:

EXCEPTION: Response with status: 404 Not Found for URL: http://localhost:8080/au/api/client/undefined/

Приветствия

Answer 1

использование flatMap/mergeMap для запуска в последовательности

ngOnInit(){ 

    this._jobService.getJob(1) 
     .map(res => { 
     this.job = job; 
     return this.job.client_id; 
     }) 
     .flatMap(client_id => this._jobService.getClient(client_id)) 
     .subscribe(client => { 
      this.client = client; 
     }); 
} 

Answer 2

Вставьте второй вызов внутри первого вызова. После получения job, выполнить второй вызов апи

import {Component, OnInit} from '@angular/core' 
import {JobService} from './job.service' 

@Component({ 
    selector: 'job', 
    template: ` 
    <table> 
    <tr> 
    <td>Job Name: {{job.name}}</td> 
    <td>Job Description: {{job.description}}</td> 
    <td>Client Name: {{client.name}}</td> 
    <td>Client Email: {{client.email}}</td> 
    </tr> 
    </table>`, 
    providers: [JobService] 
}) 
export class JobComponent{ 
    job = {}; 
    client = {}; 


    constructor(private _jobService: JobService){} 

    ngOnInit(){ 

     this._jobService.getJob(1) 
      .subscribe(job => { 
       this.job = job; 

       this._jobService.getClient(this.job.client_id) 
        .subscribe(client => { 
         this.client = client; 
        }); 
      }); 


    } 
}