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

【问题标题】：Angular : Wait for an Observable to finish before returning the valueAngular：在返回值之前等待 Observable 完成
【发布时间】：2021-06-20 19:15:20
【问题描述】：

我有一个需要返回 Observable 的方法。然后将此 observable 作为输入馈送到第三方组件。我们不能修改第三方组件。

在返回所需的 observable 时，我在这里面临的问题是我需要对结果执行一些计算，并且该计算依赖于另一个服务调用 (_transService.getTransactions)，该服务调用只能在第一次服务调用后执行。

如何在将第一个服务调用的结果返回为可观察（Observable ）之前修改它。

目前在下面的代码中它不能等待调用完成并返回空数据。

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

【问题讨论】：

标签： angular rxjs observable

【解决方案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();
        
      });
  
  });


}

【讨论】：

【解决方案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;
                }
              }
            });
          });
        });
      });
  });
}

【讨论】：