Angular 4 - Получить идентификатор из одного API и конкатенировать его с URL другого API

Question

Я работаю с Angular 4 +.

Я добавил API, который выбирает список компаний.Против этого списка компаний я выбираю сервисы, которые заказала конкретная компания.

Для получения списка сервисов, которые заказала конкретная компания, я создал функцию getCompanyServices() и назвал ее в ngOnInit мой интерфейс APIнапример:

www.example.com/company-service/255, где 255 - это идентификатор компании, выбираемой другим API.

Если я просто показываю {{company.id}} в html-представлении, отображается идентификатор, но как объединить этот company.id в URL-адресе службы get компании?

Подходы, которые я пробовал:

1. Создайте переменную company_id в моем компоненте.Файл TS присвоил ему data.company-id, но данные не анализируются.
2. Передайте идентификатор компании в функцию, в которой я вызываю API getCompanyServices (), но я не могу понять, как анализировать данные в нем.

Код: demo.service.ts (для доступа к apis)

getCompanies() {
    return this.http.get('http://example.com/api/companies', httpOptions);
  }


  getCompanyServices() {

    return this.http.get('http://example.com/v1/company-service', httpOptions);
  }

файл services.component.ts

    companies: any=[];
    services: any=[];

 ngOnInit() { 
    this.getCompanies();
    this.getCompanyServices();   
 }

 getCompanies() {
        this._demoService.getCompanies().subscribe(
            (response:any) => { console.log("Response =" , response);
        this.companies = response.data;
    },

            err => { console.error(err)},
            () => { console.log("ALL Companies FETCHED!") } 
        )
    }


    getCompanyServices() {
        this._demoService.getCompanyServices().subscribe(
            (response:any) => { console.log("Response =" , response);
           this.services = response.data;},

            err => { console.error(err)},
            () => { console.log("Services FETCHED!") }
        )
    }

HTML-файл

<p>{{company.id}}</p>
<p>{{company.name}}</p>
<button class="sidebar-services">Services</p>

Answer 1

Исходя из того, что я понимаю из вашего вопроса, вам нужно получить companyId и для каждой компании получить свои услуги.Вы можете добиться этого, используя flatMap, как показано ниже:

this.subsc = this._demoService.getCompanies()
.pipe(flatMap((s) => {
    this.companies.push(s);
    return s.id;
}),
flatMap((id) =>{
    return this._demoService.getCompanyServices(id).pipe(map((services) => {
        return services;
    }));
}))
.subscribe(res => {
    this.services.push(res);
}, 
undefined,
() => console.log('complete'));

Я подражал демо здесь: https://stackblitz.com/edit/angular-xwsltm

Answer 2

Вы можете использовать обещания, получить данные и сделать еще один вызов.

, если я не ошибаюсь, вы можете сделать что-то подобное

this.http.get('http://example.com/api/companies', httpOptions)
      .timeout(15000)
      .map(res => res.json()) // you might not need this line
      .toPromise()
      .then(compList => {
       //here you have the company list
       console.log('compList', compList); // check your developer tools to see the list 
       this.http.get('www.example.com/company-service/' + x, httpOptions) //where x should be substituted with the id of the desired company
      }

Если вы не хотите менять реализациюзатем вы уже обернули каждую из функций, используемых с Promise , и просто вызовите функцию, и .hen

станет чем-то вроде getCompanies (). then (...

если вам нужно, чтобы я объяснил больше или что-то еще, просто прокомментируйте .. Надеюсь, это помогло

Answer 3

Вы можете сделать второй звонок, когда первый решит принять список всех компаний в вашем приложении, после чего вы можете запросить информацию о конкретной сервисной компании.

В ngOninit this.getcountries().subscribe(data=>{ // your stuff this.getCompanyServices(id) // the company id that you need .subscribe(...

Getcompanyservice определение

 `
  getCompanyServices(id)  {
    this._demoService.getCompanyServices(id).subscribe(
        (response:any) => { console.log("Response =" , response);
       this.services = response.data;},

          err => { console.error(err)},
          () => { console.log("Services FETCHED!") }
       )
    }

`

В сервисе `getCompanyServices (id) {

   return this.http.get(`http://example.com/v1/company-service/${id},  httpOptions);
  }`