使用 Observables 在 Angular 中依次调用两个服务

Question

我试图在 Angular 中调用 ngOnInit 上的两个服务我有以下代码：

.ts 文件

ngOnInit() {
    // Calling 1st service
    this.serviceOne.getAllServiceOneData().subscribe(
      data => (
        this.serviceOneData = data,
        console.log('successfully loaded all service one data')
      ),
      error => this.errorMessage =   error as any,
    );

    //Trying to call 2nd service
    if (this.serviceOneData.length > 0) {
      this.serviceOneData.forEach(so => {
        this.serviceTwo.getAllServiceTwoData(so.id.toString()).subscribe(
          data => (
            this.serviceTwoData= data,
            console.log('successfully loaded service two related data')
          ),
          error => this.errorMessage =   error as any,
        );
      });  //forEach
    }  //if
}

现在，我想订阅第二个服务并获取在第一个服务上获取的每个项目的相关信息。

在 Angular 中使用 observable 是否可行？顺便说一句，我正在使用 Angular 7。

Answer 1

您应该像这样使用switchMap 和forkJoin（请参阅 cmets 的解释）：

this.serviceOne.getAllServiceOneData()
        .pipe(
          //Use switchMap to call another API(s)
          switchMap((dataFromServiceOne) => {
            //Lets map so to an observable of API call
            const allObs$ = dataFromServiceOne.map(so => this.serviceTwo.getAllServiceTwoData(so.id.toString()));

            //forkJoin will wait for the response to come for all of the observables
            return forkJoin(allObs$);
          })
        ).subscribe((forkJoinResponse) => {
          //forkJoinResponse will be an array of responses for each of the this.serviceTwo.getAllServiceTwoData CALL
          //Do whatever you want to do with this array
          console.log(forkJoinResponse);
        });

您也可以使用concat 而不是forkJoin，具体取决于您的应用需求。

希望对你有帮助。