Question

我有两个不同的Observables。一，获取物品清单。它返回对象数组，其中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呈现所有带有细节的项目。

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

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

以下是有关fork联接的信息 https://www.learnrxjs.io/operators/combination/forkjoin.html

我建议您观看此视频并完整阅读本文，以了解如何使用展平运算符。

https://medium.com/@shairez/a-super-ninja-trick-to-learn-rxjss-switchmap-mergemap-concatmap-and-exhaustmap-forever-88e178a75f1b

如果您需要更多帮助或说明，请告诉我。

Angular 2+，带有嵌套对象的已订阅对象数组在forEach

1 个答案: