Angular如何将FlatMap与Subject一起使用？

Question

我对主题有疑问

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个下一个方法，因为我必须下载三个包含数据（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时，无法迭代所有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);
      });

Meybe，您知道如何混合使用flatMap（以获取正常数据，避免使用_isScalar ...）并按每个可观察对象迭代所有pageNumber，不仅最后一次使用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 }