Angular：在返回值之前等待 Observable 完成

Question

我有一個需要返回 Observable 的方法。 然后將此 observable 作為輸入饋送到第三方組件。 我們不能修改第三方組件。

在返回所需的 observable 時，我在這里面臨的問題是我需要對結果執行一些計算，並且該計算依賴於另一個服務調用 (_transService.getTransactions)，該服務調用只能在第一次服務調用后執行。

如何在將第一個服務調用的結果返回為可觀察（Observable < searchResult > ）之前修改它的結果。

目前在下面的代碼中，它不能等待調用完成並返回空數據。

public search(): Observable<Response<ListDetail>> {
  let searchResult: Response<ListDetail>;

  let gridData: ListDetail[] = [];
  this.post(`search`)
    .pipe(
      filter((response: Response<ListDetail>): boolean => response && response.status === 'Success'),
      mergeMap(
        (res: Response<ListDetail>): Observable<Response<Transactions[]>> => {
          searchResult = res;
          gridData = res.content.items;
          const ids = res.content.items.map((result: ListDetail) => result.id);
          return this._transService.getTransactions(ids);
        }
      )
    )
    .subscribe((res: Response<Transactions[]>) => {
      const transactionsList = res.content;
      gridData.forEach((item: ListDetail) => {
        item.transactions = [];
        transactionsList.forEach((result: Transactions) => {
          const transactions = result?.transactions;
          transactions.forEach((transaction: Transaction) => {
            if (transaction.parentId === 0) {
              item.transactions.push(transaction);
              if (transaction.transactionType === 'CASH') {
                if (!item.cashAmount) {
                  item.cashAmount = 0;
                }
                item.cashAmount+= transaction.amount;
              }              }
          });
        });
      });
    });
  return of(searchResult);
}

Answer 1

嘗試這個。

public search(): Observable<Response<ListDetail>> {
  let searchResult: Response<ListDetail>;
  return new Observable<Response<ListDetail>>(observer => {

    let gridData: ListDetail[] = [];
    this.post(`search`)
      .pipe(
        filter((response: Response<ListDetail>): boolean => response && response.status === 'Success'),
        mergeMap(
          (res: Response<ListDetail>): Observable<Response<Transactions[]>> => {
            searchResult = res;
            gridData = res.content.items;
            const ids = res.content.items.map((result: ListDetail) => result.id);
            return this._transService.getTransactions(ids);
          }
        )
      )
      .subscribe((res: Response<Transactions[]>) => {
        const transactionsList = res.content;
        gridData.forEach((item: ListDetail) => {
          item.transactions = [];
          transactionsList.forEach((result: Transactions) => {
            const transactions = result?.transactions;
            transactions.forEach((transaction: Transaction) => {
              if (transaction.parentId === 0) {
                item.transactions.push(transaction);
                if (transaction.transactionType === 'CASH') {
                  if (!item.cashAmount) {
                    item.cashAmount = 0;
                  }
                  item.cashAmount+= transaction.amount;
                }
              }
            });
          });
        });
        
        observer.next(searchResult);
        observer.complete();
        
      });
  
  });


}

Answer 2

另一種選擇是使用水龍頭：

public search(): Observable<Response<ListDetail>> {
  return new Observable<Response<ListDetail>>(observer => {

    let gridData: ListDetail[] = [];
    this.post(`search`)
      .pipe(
        filter((response: Response<ListDetail>): boolean => response && response.status === 'Success'),
        tap( res => { 
          observer.next(res);
          observer.complete();
        }),
        mergeMap(
          (res: Response<ListDetail>): Observable<Response<Transactions[]>> => {
            searchResult = res;
            gridData = res.content.items;
            const ids = res.content.items.map((result: ListDetail) => result.id);
            return this._transService.getTransactions(ids);
        }
        )
      )
      .subscribe((res: Response<Transactions[]>) => {
        const transactionsList = res.content;
        gridData.forEach((item: ListDetail) => {
          item.transactions = [];
          transactionsList.forEach((result: Transactions) => {
            const transactions = result?.transactions;
            transactions.forEach((transaction: Transaction) => {
              if (transaction.parentId === 0) {
                item.transactions.push(transaction);
                if (transaction.transactionType === 'CASH') {
                  if (!item.cashAmount) {
                    item.cashAmount = 0;
                  }
                  item.cashAmount+= transaction.amount;
                }
              }
            });
          });
        });
      });
  });
}