将依赖的RxJ观测值链接在一起?

时间:2020-10-01 05:53:59

标签: angular rxjs observable

我试图将依赖于api调用的可观察对象(依赖于先前可观察对象中的数据)链接在一起,以组成对象。

我获取了具有清单ID的名册。从该ID中,我获取清单,然后从两者中组成一个注册表。

下面是我喜欢的代码。在上一个concatMap中出现类型分配错误。

  composeRegistry(slug:string):Observable<Registry>{
    let roster:Roster;
    const registry$ = !slug ? of(null) : this.selectRoster(slug).pipe(
      tap(res => roster = res), // storing the variable outside because I was having trouble referencing it later
      concatMap((res:Roster) => {
        return this.manifestQuery.selectManifest(res.manifest);
      }),
      concatMap((manifest:Manifest) => { // error HERE, snipped below
        let registry: Registry = {
          ...roster,
          hash: manifest.hash,
          publisher: manifest.publisher,
          url: manifest.url}
        return registry;
      })
    );
    return registry$;
  }

错误:

Argument of type '(manifest: Manifest) => Registry' is not assignable to parameter of type '(value: Manifest, index: number) => ObservableInput<any>'.
  Type 'Registry' is not assignable to type 'ObservableInput<any>'.
    Property '[Symbol.iterator]' is missing in type 'Registry' but required in type 'Iterable<any>'.ts(2345)

当我刚刚获取花名册时,一切工作正常,但是相关的api调用使我有些困惑。

2 个答案:

答案 0 :(得分:1)

我想说您实际上不需要第二个concatMap。如果您要做的只是从可观察对象返回类型为Registry的对象,则可以通过管道将map插入该对象。这也将消除对变量let roster: Roster的需要。尝试以下

composeRegistry(slug:string): Observable<Registry> {
  const registry$ = !slug 
    ? of(null) 
    : this.selectRoster(slug).pipe(
      concatMap((roster: Roster) => 
        this.manifestQuery.selectManifest(roster.manifest).pipe(
          map((manifest: Manifest): Registry => (<Registry>{ 
            ...roster, 
            hash: manifest.hash,
            publisher: manifest.publisher,
            url: manifest.url
          }))
        )
      );
  return registry$;
}

答案 1 :(得分:-1)

concatMap应该返回一个Observable。但是,您返回一个类型为Registry的对象。代替concatMap,只需使用map()即可。那应该解决它。