将依赖的 RxJs observables 链接在一起？

Question

我正在尝试链接依赖于 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 调用让我有点不舒服。

Answer 1

concatMap 应该 return 一个 Observable。但是你 return 一个 Registry 类型的对象。而不是 concatMap 只需使用 map()。这应该可以解决它。

Answer 2

我会说你实际上不需要第二个 concatMap。如果您只想 return 来自 observable 的 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$;
}

将依赖的 RxJs observables 链接在一起？

Chaining dependent RxJs observables together?

observable

rxjs

angular