javascript - Angular RxJs Observable 流合并数据

Question

我正在尝试重构我的 Angular 代码以使其更具“ react 性”

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

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

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

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

付款数据需要父帐户数据中的 customerId 参数。

我已经设法使用 mergeMap 从第一个可观察的数据中传递此数据，但是结果输出仅给我支付数据，我希望将帐户对象与添加在其中的支付数据作为输出。 就像这样:

{
 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

这可以通过创建闭包来解决:

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