Angular RxJs Observable流合并数据

Question

我正在尝试重构我的 Angular 代码，使其更 "reactive"

我有从 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 确实会替换流中的数据，但是有没有办法让数据合并到当前流数据对象中？

Answer 1

我会在 mergeMap 中使用 combineLatest 来获取帐户数据的句柄。

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)),
    )

Answer 2

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

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

Angular RxJs Observable流合并数据

Angular RxJs Observable stream merge data

javascript

rxjs

angular

rxjs-observables