Angular：從其他 observable 管道內的 forkJoin 返回值

Question

這是我需要實現的場景：

1. 我調用一個 API，它返回一個帶有對象數組的響應
2. 我將這些對象映射到另一個對象數組
3. 對於這個新對象數組的每個項目，我需要調用另一個 API 調用
4. 第二次調用的響應必須在我在 2 中創建的數組的每個對象中設置一個值。
5. 我想用 4 中的對象數組返回一個 observable。

到目前為止，我已經能夠創建以下內容：

public getWishlist ( receiver : Person) : Observable<Wish[]>{
    return this.http$.get<IWishlistResponse[]>(environment.apiUrl + 'wishlist/' + receiver.id).pipe(
      map( (response) => {
        let wishes: Wish[] = [];
        response[0].wishes.forEach((wish) => {
          wishes.push(new Wish(
            wish._id,
            wish.title,
            wish.price,
            null,
            wish.url
          ));
        });
        return wishes;
      }),
      tap( (wishes) => {
        let wishStateObservables = wishes.map(wish => this.http$.get<wishStatus>(environment.apiUrl + 'wish/' + wish.id + '/state').pipe(catchError(() => of(null))));
        forkJoin(wishStateObservables)
          .pipe(
            map(states => {
              states.forEach((state, index) => {
                wishes[index].status = state;
              });
              return wishes;
            })
          ).subscribe((wishes => { console.log(wishes) }));
      })
    );

訂閱 forkjoin 的 console.log 中的“願望”是我想在我的 observable 中返回的值，但我無法在這個 observable 中得到它們。 那么我應該使用什么來代替 'tap' 運算符。 能夠將 forkJoin 管道的結果放在我返回的 observable 中？

Answer 1

嘗試為switchMap切換tap ，它會切換到一個新的 observable。

import { switchMap } from 'rxjs/operators';
...
public getWishlist ( receiver : Person) : Observable<Wish[]>{
    return this.http$.get<IWishlistResponse[]>(environment.apiUrl + 'wishlist/' + receiver.id).pipe(
      map( (response) => {
        let wishes: Wish[] = [];
        response[0].wishes.forEach((wish) => {
          wishes.push(new Wish(
            wish._id,
            wish.title,
            wish.price,
            null,
            wish.url
          ));
        });
        return wishes;
      }),
      switchMap( (wishes) => { // change to switchMap to switch to new observable
        let wishStateObservables = wishes.map(wish => this.http$.get<wishStatus>(environment.apiUrl + 'wish/' + wish.id + '/state').pipe(catchError(() => of(null))));
        return forkJoin(wishStateObservables); // add return here to return for the switchMap
      }),
      map(states => { // remove the inner pipe from the forkJoin and put the pipe in outer pipe
              states.forEach((state, index) => {
                wishes[index].status = state;
              });
              return wishes;
      }),
    );