如何在 Angular 中将 flatMap 与 Subject 一起使用答案

【问题标题】：How to use flatMap with Subject in Angular如何在 Angular 中将 flatMap 与 Subject 一起使用
【发布时间】：2020-07-29 16:01:04
【问题描述】：

Subject 有问题

this.subjectService.createNext(this.service.getData(pageNumber=1)
this.subjectService.createNext(this.service.getData(pageNumber=2)
this.subjectService.createNext(this.service.getData(pageNumber=3)

我调用了 3 个 next 方法，因为我必须下载三个带有数据 (3x10) 的 API 页面。

在另一个组件中我订阅了这个主题：

this.subjectService.getData()
  .pipe(flatMap(res => res))
  .subscribe((result) => {
  console.log(result);
});

我正在使用 flatMap，因为没有 flatMap 我收到：

>> Observable {_isScalar: false, source: Observable, operator: MapOperator}
>> Observable {_isScalar: false, source: Observable, operator: MapOperator}
>> Observable {_isScalar: false, source: Observable, operator: MapOperator}

问题是，当我使用 flatMap 时，我无法迭代所有 pageNumber。

this.subjectService.getData()
.pipe(tap(() =>
console.log(pageNumber))) /* It returns 1,2,3

.pipe(flatMap(res => res))

.pipe(tap(() =>
console.log(pageNumber))) /* after flatMap: It returns 3,3,3

.subscribe((result) => {
console.log(result);
      });

也许您知道如何混合 flatMap（为了获取普通数据，避免使用 _isScalar...）并迭代每个 observable 的所有 pageNumber，而不仅仅是最后一次使用 createNext(pageNumber=3) 调用。

【问题讨论】：

什么是createNext？
createNext 是放在 subject.service.ts 中的函数。该函数包含代码：this.subject.next(apiCall, pageNumber);
这看起来比它应该的复杂。为什么不直接使用 combineLatest 和 3 个 http 调用？还是合并？还是forkJoin？为什么要附加主题。

标签： angular rxjs subscribe flatmap subject

【解决方案1】：

您应该将您的页码与您从 this.service.getData 创建的 observable 一起附加。

这样

this.subjectService
  .createNext(
    this.service.getData(1)
      .pipe(map(data => ({ data, pageNumber: 1 }))
  )

this.subjectService
  .createNext(
    this.service.getData(2)
      .pipe(map(data => ({ data, pageNumber: 2 }))
  )

this.subjectService
  .createNext(
    this.service.getData(3)
      .pipe(map(data => ({ data, pageNumber: 3 }))
  )

您使用平面地图收到的数据将是

// { data: { some: 'object' }, pageNumber: 1 }
// { data: { some: 'object' }, pageNumber: 2 }
// { data: { some: 'object' }, pageNumber: 3 }

【讨论】：