Angular RxJs Observable 流合并数据答案

【问题标题】：Angular RxJs Observable stream merge dataAngular RxJs Observable 流合并数据
【发布时间】：2020-09-01 11:44:33
【问题描述】：

我正在尝试重构我的 Angular 代码，使其更具“反应性”

我有从 Observable 返回的数据，它将帐户数据 account$ 检索到一个对象中例如：

{
 accountid: "123435", 
 name: 'bob', 
 customerId: "AR4533" 
 ..etc}

我还想从另一个方法调用中检索付款数据并将其合并到帐户对象数据中：

{
 paymentId: "13434", 
 paymentName:"pay1" 
 ..etc}

支付数据需要一个 customerId 参数，该参数位于父账户数据中。

我已经设法使用 mergeMap 从第一个 observable 传递这些数据，但是结果输出只给了我支付数据，我希望将带有支付数据的帐户对象作为输出添加到其中。像这样：

{
 accountid: "123435", 
 name: 'bob', 
 paymentData: {
    paymentId: "13434", 
    paymentName:"pay1" ..etc
   }
}

account$ = this.http.get<IAccountResponse>('account')
    .pipe(
      map(data => data.data),
      mergeMap(data => this.http.get<any>(`payment/subscription?customer=${data.stripe.customerId}`)),
      tap(data => console.log('PIPE:account', data))
    )

我知道 mergeMap 确实会替换流中的数据，但是有没有办法让数据合并到当前的流数据对象中？

【问题讨论】：

标签： javascript angular rxjs rxjs-observables

【解决方案1】：

这可以通过创建一个闭包来解决：

account$ = this.http.get<IAccountResponse>('account')
    .pipe(
      map(data => data.data),
      mergeMap(
        data => this.http.get<any>(`payment/subscription?customer=${data.stripe.customerId}`).pipe(
          map(paymentData => ({ ...data, paymentData }))
        )
      ),
      tap(data => console.log('PIPE:account', data))
    )

【讨论】：

【解决方案2】：

我会在mergeMap 中使用combineLatest 来获取accountData 的句柄。

import { combineLatest, of } from 'rxjs';

account$ = his.http.get<IAccountResponse>('account')
    .pipe(
      map(data => data.data),
      mergeMap(data => combineLatest(
        of(data.data),
        this.http.get<any>(`payment/subscription?customer=${data.stripe.customerId}`),
      )),
      map(([accountData, customerData]) => {
        return {
          acountid: accountData.accountid,
          name: accountData.name,
          paymentData: {
            paymentId: customerData.paymentId,
            paymentName: customerData.paymentName,
          }
        };
      }),
      tap(data => console.log(data)),
    )

【讨论】：