Angular RxJs 可觀察到的 stream 合並數據

Question

我正在嘗試重構我的 Angular 代碼，使其更具“反應性”

我有從 Observable 返回的數據，它將帳戶數據 account$ 檢索到 object 中，例如：

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

我還想從另一個方法調用中檢索付款數據並將其合並到帳戶 object 數據中：

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

支付數據需要一個 customerId 參數，該參數位於父帳戶數據中。

我已經設法使用 mergeMap 從第一個 observable 傳遞這些數據，但是生成的 output 只給了我付款數據，我希望擁有 object 帳戶，其中添加了付款數據為 Z78E6221F6393D13CE5D8668。 像這樣：

{
 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 確實替換了 stream 中的數據，但是有沒有辦法讓數據合並到當前的 stream 數據 object 中？

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

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