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

也许您知道如何混合使用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 }

如何在Angular中将FlatMap与Subject一起使用

1 个答案: