輸入“可觀察的<subscription> ' 不可分配給 Observable 類型<mydata> rxjs angular</mydata></subscription>

Question

在 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

我該如何解決這個問題？

Answer 1

你快到了。 RxJS 運算符map用於操作從可觀察對象發出的數據並轉發它。

選項 1：依賴可觀察量

要從一個可觀察到另一個可觀察到 map，您需要使用更高階的映射運算符，如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：獨立的可觀察量

如果 observable 不相互依賴，您可以使用類似 RxJS forkJoin function 的東西來並行觸發 observable。

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
  }
});

有關避免嵌套訂閱的更多信息，請參見此處。

Answer 2

您必須將switchmap修改為map 。

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

Answer 3

這是因為您的 function 返回類型是Observable<MyData>並且在map function 中您返回subscription

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

您必須訂閱searchData()方法，該方法將訂閱外部和內部可觀察對象。 您可以使用tap運算符分別從這些 api 獲取數據。

    searchData(): Observable<MyData> {
        const url = `${this.context}/search`;
        return this.http.get<MyData>(url).pipe(
             tap(myData => console.log(myData)),
             switchMap((myData: MyData) => this.secondService.getOtherData()),
             tap(otherData => console.log(otherData))
        );
    }