mergeMap не возвращает данные, когда внутреннее наблюдаемое пусто / api не возвращает данных

Question

Я пытаюсь объединить три наблюдаемых объекта, и когда внутренний наблюдаемый объект не имеет данных, mergeMap не возвращает никаких данных. Я хочу иметь возможность продолжить процесс, даже если одна из внутренних наблюдаемых пуста. Как мне справиться с этой ситуацией? Вот мой код:

    ngOnInit() {
        this.accountStatusSub = this.accountService.accountNumberChange$.subscribe(
          accNumber => 
              {this.accountNumber = accNumber;


            var obs = this.accountService.getAccountDetails(this.accountNumber)
                  .pipe(mergeMap(accountData =>
                    this.accountService.getBill(accountData.account[0].accountNumber)
                      .pipe(mergeMap(billData =>
                        this.accountService.getPayment(accountData.account[0].accountNumber)
                          .pipe(map(paymentData => ({
                            address1: accountData.account[0].address1,
                            address2: accountData.account[0].address2,
                            city: accountData.account[0].city,
                            state: accountData.account[0].state,
                            zip: accountData.account[0].zip,
                            amountDue: billData.bill[0].amountDue,
                            dueDate: billData.bill[0].dueDate,
                            lastPaymentAmount: paymentData.payment[0].paymentAmount,
                            lastPaymentDate: paymentData.payment[0].paymentDate
                          })

                          ))
                      ))
                  ))


                obs.subscribe(combinedAccountData => {
                  console.log('MergeMap:', combinedAccountData)
                })

              })
          }

CombinedAccountData пуст, если либо billData, либо paymentData пусто. Есть ли лучший способ написать приведенный выше код? Я новичок в angular и rxjs. Спасибо.

Answer 1

ОБНОВЛЕНО

желаемый результат был достигнут

ngOnInit() {
  this.accountStatusSub = this.accountService.accountNumberChange$.pipe(
    tap(accNumber => console.log(accNumber)),
    mergeMap(accNumber => {
      this.accountNumber = accNumber;
      const getAccount = this.accountService.getAccountDetails(accNumber);
      const getBill = this.accountService.getBill(accNumber);
      const getPayment = this.accountService.getPayment(accNumber);
      return forkJoin(getAccount, getBill, getPayment);
    })
   ).subscribe();
}

ОРИГИНАЛ

если они могут вернуть пустые данные, вы можете вернуть пустой объект и распространить его. Зависит от структуры, которую вы хотите получить.

ngOnInit() {
    this.accountStatusSub = this.accountService.accountNumberChange$.pipe(
        switchMap(accNumber =>
            this.accountService.getAccountDetails(accNumber),
        ),
        switchMap(accountData => combineLatest([
            of(accountData),
            this.accountService.getBill(accountData.account[0].accountNumber),
            this.accountService.getPayment(accountData.account[0].accountNumber),
        ])),
        map(([accountData, billData, paymentData]) => ({
            address1: accountData.account[0].address1,
            address2: accountData.account[0].address2,
            city: accountData.account[0].city,
            state: accountData.account[0].state,
            zip: accountData.account[0].zip,
            billData,
            ...( billData?.bill && billData.bill[0] ? {
              amountDue: billData.bill[0].amountDue,
              dueDate: billData.bill[0].dueDate,
            } : {}),
            paymentData,
            ...( paymentData?.payment && paymentData.payment[0] ? {
              lastPaymentAmount: paymentData.payment[0].paymentAmount,
              lastPaymentDate: paymentData.payment[0].paymentDate
            } : {}),
        }))).subscribe(combinedAccountData => {
            console.log('MergeMap:', combinedAccountData)
        });
}