Angular 如何在 Subject 中使用 flatMap

Question

我有问题 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 个下一个方法，因为我必须下载三个 API 包含数据 (3x10) 的页面。

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

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 时，我无法迭代所有 pageNumbers。

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...）并迭代每个可观察对象的所有 pageNumbers，而不仅仅是最后一次使用 createNext(pageNumber=3) 调用。

Answer 1

您应该将您的页码附加到您从 this.service.getData 创建的可观察对象中。

像这样

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 }

Angular 如何在 Subject 中使用 flatMap

How to use flatMap with Subject in Angular

subject

subscribe

rxjs

flatmap

angular