Angular 2+，带嵌套对象的订阅数组在forEach中循环订阅

Question

我有两个不同的Observable。一，获取物品清单。它返回对象数组，其中json键之一是“ fakturaId”：

getInvoiceForResidence() {
    return this.httpClient.get<Invoices>(
      this.url
    );
  }

我可以使用此“ fakturaId”放入第二个Observable并获取特定对象的详细信息：

getInvoicePreview(fakturaId: number) {
    return this.httpClient.get<InvoicePrev>(this.url + fakturaId);
  }

要获得所有具有详细信息的项目，我使用带有嵌套订阅和forEach循环的代码：

getInvoices() {
    this.invoiceService.getInvoiceForResidence().subscribe(res4 => {

      // invoice list
      this.invoices = res4;

      // invoice details
      this.invoices.forEach(inv => {
        this.invoiceService.getInvoicePreview(inv.fakturaId).subscribe(res5 => {
          inv.InvoicePreview = res5;
        });
      });
    });
  }

“ InvoicePreview”是“ invoices”的键，所以之后我有了一个数组，我可以使用* ngFor]来简单地用HTML渲染所有带有细节的项目。

有没有更好的方法可以做到相同但没有嵌套订阅？如果一个项目很多，则应用程序运行非常缓慢。

我有两个不同的Observable。一，获取物品清单。它返回对象数组，其中json键之一是“ fakturaId”：getInvoiceForResidence（）{返回this.httpClient.get ...

Answer 1

将多个网络请求分组在一起并避免嵌套订阅（反模式），建议您使用forkJoin和concatMap。 forkJoin允许您将可观察变量分组，并且concatMap是展平运算符

// getInvoices() {
//     this.invoiceService.getInvoiceForResidence().subscribe(res4 => {

//       // invoice list
//       this.invoices = res4;

//       // invoice details
//       this.invoices.forEach(inv => {
//         this.invoiceService.getInvoicePreview(inv.fakturaId).subscribe(res5 => {
//           inv.InvoicePreview = res5;
//         });
//       });
//     });
//   }

import { of, forkJoin, Observable } from 'rxjs'; 
import { tap, concatMap } from 'rxjs/operators'

let invoices = [];

function getInvoices() {
  // Mock your invoices
  const getInvoiceForResidence = of([{fakturaId: "invoice 1"}, {fakturaId: "invoice 2"}, {fakturaId: "invoice 3"}])
  const getInvoicePreview = (id: string) => of('preview from ' + id)

  return getInvoiceForResidence.pipe(
    tap((invoices) => invoices = invoices),
    concatMap((invoices ) => {
      const networkRequestsToMake: Observable<string>[] = invoices.map(invoice => getInvoicePreview(invoice.fakturaId))
      return forkJoin(...networkRequestsToMake)
    })
  )
}

getInvoices().subscribe(signal => {
  console.log(signal)
})


请在此处复制并粘贴此代码：https://stackblitz.com/edit/rxjs-koqtab?devtoolsheight=60