angular - 使用 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(解释见注释):

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

而不是 forkJoin你也可以使用 concat取决于您的应用程序需要。

希望对您有所帮助。