如何在 Angular 11 / ionic 6 中使用 MergeMap？

Question

我对合并多个 API 请求的 MergeMap 方法非常陌生。我已经关注并阅读了本教程如何操作。

https://levelup.gitconnected.com/handle-multiple-api-requests-in-angular-using-mergemap-and-forkjoin-to-avoid-nested-subscriptions-a20fb5040d0c

这是我从 API:

获取数据的代码

Service.ts

getPriceList(): Observable<Price[]> {    
    this.http.get<Price[]>(this.baseUrl).pipe(     
      map( priceId => {
        const id = priceId[0];
        this.priceId = id.id;
        return id;
            }),
     mergeMap( Id=> this.http.get(this.baseUrl2 + /${Id.id})),
      
    ).subscribe( productPrices => {
       this.productPrices = productPrices;
    });
  }

我需要第一个 baseUrl 中的所有数据，但我分配了 Id 以便在我的第二个 api 请求中使用它。我在 home.ts 中这样调用这个方法：

 this.dataService.getPriceList().subscribe(response => {
      console.log(response);
      this.priceListData = response;

我在文件中调用这个方法没有报错

错误在 Service.ts

的方法中

A function whose declared type is neither 'void' nor 'any' must return a value.ts(2355)

我在第一个 api 请求中使用 return 语句。

我试过这个解决方案：

然后我得到以下错误：

Type 'Subscription' is missing the following properties from type 'Observable<Crypto[]>': _isScalar, source, operator, lift, and 6 more.ts(2740)

如何在 Angular 11 / ionic 6 中正确使用 MergeMap？

Answer 1

我认为你应该 return getPriceList 上的一些东西，但你不是，如果你在 getPriceList 内订阅，之后就没有可观察到的东西可以订阅了

  getPriceList(): Observable<Price[]> {
    return this.http
      .get<Price[]>(this.baseUrl)
      .pipe(
        map(priceId => {
          const id = priceId[0];
          this.priceId = id.id;
          return id;
        }),
        mergeMap(id => this.http.get(`this.baseUrl2${id.id}`))
      )
  }

和通话

this.dataService.getPriceList().subscribe(response => {
  console.log(response);
  this.priceListData = response;  
});

如何在 Angular 11 / ionic 6 中使用 MergeMap？

How to use MergeMap in Angular 11 / ionic 6?

html

android

typescript

ionic-framework

angular