angular - 在 forkJoin 中使用 mergeMap 来获取一个依赖于另一个的可观察对象

Question

我有几个异步请求的组合，我需要一起完成(使用 forkJoin 完成)- 这样做时，我启动一个对象:

    export class fullData
    {
        AProp  : any;
        BProp  : any;
        CProp  : any;
    }
    const fullDataObservable : fullData = forkJoin(
    {
        AProp : this.myFirstSrv.getAProp(), 
        BProp : this.mySecondsSrv.getBProp(),
        CProp : this.myThirdSrv.getCProp()
    });
    return fullDataObservable;      

到目前为止 - 非常好。现在 - 我在这个对象中有 3 个新属性:

    export class fullData
    {
        AProp  : any;
        BProp  : any;
        CProp  : any;
        prop1 : any;
        prop2 : any;
        prop3 : any;
        
    }

then(prop1)的first依赖CProp值(或this.myThirdSrv.getCProp())作为参数，在做get请求时， second (prop2)是对first的简单操作，第三个(prop3)也依赖于second 作为 get 请求中的参数。我试过使用 mergeMap，但没有用。我做错了什么？:

    gatherAllRelevantData() : any
      {
        //this.myService.getProp1() return observable after get request 
        this.myService.getProp1().pipe
        (
          mergeMap((prop1Value : any[]) => 
          {
            //this.myService.getResultAfterSimpleManipulation return object, not observable
            let prop2Values : any[] = this.myService.getResultAfterSimpleManipulation(prop1Value);
            //the this.getProp3Value return observable aftet get request
            return this.getProp3Value(prop2Value).pipe(
              map(prop3Values => 
                {
                  return { prop1 : prop1Value, prop2 : prop2Values, prop3 : prop3Values };
                })
            )
          }
      ));
    }

这一切都应该在解析函数中完成，并且应该通过从 this.gatherAllRelevantData 获取数据(没有发生)并且没有不必要地执行 this.gatherAllRelevantData 来启动 fullData 对象:

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> 
    {
      const fullDataObservable = forkJoin(
      {
        AProp : this.myFirstSrv.getAProp(), 
        BProp : this.mySecondsSrv.getBProp(),
        CProp : this.myThirdSrv.getCProp(),
        prop1 : this.gatherAllRelevantData().map(item => items.prop1),
        prop1 : this.gatherAllRelevantData().map(item => items.prop1),
        prop1 : this.gatherAllRelevantData().map(item => items.prop1)
    });
    return fullDataObservable; 
  } 

Answer 1

1. 如果 fullData 类仅用于保存成员变量，则可以改用接口(interface)。

2. 根据您提到的条件，您可以将 RxJS switchMap(或 mergeMap)运算符与 map 运算符一起使用得到你要求的对象。

尝试以下操作

export interface fullData {
  AProp: any;
  BProp: any;
  CProp: any;
  prop1: any;
  prop2: any;
  prop3: any;
}

const fullDataObservable: Observable<fullData> = forkJoin({ // <-- it's of type `Observable<fullData>`, not `fullData`
  AProp: this.myFirstSrv.getAProp(), 
  BProp: this.mySecondsSrv.getBProp(),
  CProp: this.myThirdSrv.getCProp()
}).pipe(
  switchMap(data =>
    this.someService.getProp1(data.CProp).pipe( // <-- get `prop1` that depend on `data.CProp`
      map(prop1 => ({
        AProp: data.AProp,
        BProp: data.BProp,
        CProp: data.CProp,
        prop1: prop1,
        prop2: this.simpleManipulate(prop1) // <-- get `prop2` that depend on `prop1`
      }))
    )
  ),
  switchMap(data =>
    this.someService.getProp3(data.prop2).pipe( // <-- get `prop3` that depend on `data.prop2`
      map(prop3 => ({
        AProp: data.AProp,
        BProp: data.BProp,
        CProp: data.CProp,
        prop1: data.prop1,
        prop2: data.prop2,
        prop3: data.prop3
      }))
    )
  )
)

return fullDataObservable;