将数组从 api 调用传递到第二个 api 调用

Question

我正在尝试进行 2 个 api 调用，其中一个 api 获取 ID 数组，我需要根据返回的 ID 进行另一个 api 调用对象，我可以在其中根据从中接收到的数据来显示一些表单输入。

但是我现在在尝试拨打第二个电话时卡住了。任何关于如何进行第二次调用的建议都将不胜感激。

//api.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  baseurl = 'http://localhost:5000';

  constructor(private http: HttpClient) { }

  getIds(id){
    return this.http.get(this.baseurl + '/types/' + id);
  }

  getCustomFieldsById(id){
    return this.http.get(this.baseurl + '/types/fields/' + id );
  }
}

//custom.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { ApiService } from '../api.service';
import { map, mergeMap, switchMap } from 'rxjs/operators';


@Component({
  selector: 'app-custom',
  templateUrl: './custom.component.html'
})

export class CustomComponent implements OnInit {

  constructor(private apiService: ApiService) {
  }

  ngOnInit(){
  }

  getCustomFields(id){
    this.apiService.getIds(id)
    //this returns an obj in which arrayData constains an array of ids that is needs to be passed into the other api call
    .pipe(
      map((obj: any) => {
        //trying to map the array from the obj
        const data = obj.arrayData;
        return data;
      }),
      mergeMap(data =>
          //data here is an array of ids
          //suppose to receive the ids from the arrayData above 
          this.apiService.getCustomFieldsById(data)
      )
    ).subscribe(response => {
      console.log(response);
    });
  }
}

Answer 1

如果你想获得ids(arrayData)中的一系列id，你可以使用switchMap代替map:

this.apiService.getIds(id)
    .pipe(
      switchMap((obj: any) => {
        const data = obj.arrayData;
        return data;
      }),
      mergeMap(id =>
          this.apiService.getCustomFieldsById(id)
      ),
    ).subscribe(response => {
      console.log(response); // response is a series of CustomField
    });

或者如果你想获得customFields的列表，你可以使用forkJoin:

this.apiService.getIds(id)
    .pipe(
      map((obj: any) => {
        const data = obj.arrayData;
        return data;
      }),
      mergeMap(ids =>
          forkJoin(ids.map(id => this.apiService.getCustomFieldsById(id)))
      ),
    ).subscribe(response => {
      console.log(response); // response is CustomFields[]
    });

将数组从 api 调用传递到第二个 api 调用

Passing an array from an api call to a second api call

rxjs6

angular9