时间戳

首页 > 解决方案 > 类型'可观察的' 不可分配给 Observable 类型rxjs 角度

angular - 类型'可观察的' 不可分配给 Observable 类型rxjs 角度

问题描述

在 Angular 中，我创建了一个从不同服务获取数据并将数据与第一个服务合并的服务。这是代码

searchData(): Observable<MyData> {
    const url = `${this.context}/search`;
    return this.http.get<MyData>(url)
        .pipe(
            map((myData: MyData) => {
                return this.secondService.getOtherData().subscribe((data) => {
                    // some manipulation
                    return myData;
                });
            }));
}

但这显示了错误

Type 'Observable<Subscription>' is not assignable to type 'Observable<MyData>'.
  Type 'Subscription' is missing the following properties from type 'MyData': data, dataCount

我该如何解决这个问题？

标签： angularrxjs

解决方案

你快到了。RxJS 运算符map用于操作从 observable 发出的数据并转发它。

选项 1：依赖的 observables

要从一个 observable 映射到另一个，您需要使用更高阶的映射运算符，例如switchMap.

searchData(): Observable<MyData> {
  const url = `${this.context}/search`;
  return this.http.get<MyData>(url).pipe(
    switchMap((myData: MyData) =>         // <-- `switchMap` here
      this.secondService.getOtherData().pipe( // <-- assuming `getOtherData()` depends on response from 1st call
        map((data: any) => {              // <-- `map` here
          // some manipulation
          return myData;
        })
      )
    )
  );
}

选项 2：独立的 observables

如果 observables 不相互依赖，你可以使用类似 RxJSforkJoin的函数来并行触发 observables。

searchData(): Observable<MyData> {
  const url = `${this.context}/search`;

  return forkJoin({
    myData: this.http.get<MyData>(url),
    secondData: this.secondService.getOtherData().pipe(  // <-- assuming `getOtherData()` doesn't depend on response from 1st call
      map((data: any) => {
        // some manipulation
        return manipulatedData;
      })
    )
  });
}

在这种情况下，您将在订阅中获得两个响应。

this.searchData().subscribe({
  next: (res: any) => {
    // res.myData
    // res.secondData
  },
  error: (error: any) => {
    // handle error
  }
});

有关避免嵌套订阅的更多信息，请参见此处。

推荐阅读