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

Question

我有两个不同的 Observable。一，获取项目列表。它 returns 对象数组，其中 json 键之一是 "fakturaId":

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

我可以使用这个 "fakturaId" 放入第二个 Observables 并获取特定对象的详细信息：

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 join 的信息 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 循环中嵌套订阅

Angular 2+, Subscribed array of object with nested subscribes in loop forEach

subscribe

observable

rxjs

angular