Как использовать flatMap с темой в Angular - PullRequest
Новая
       109

Как использовать flatMap с темой в Angular

0 голосов
/ 16 апреля 2020

У меня проблема с 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, я не могу перебрать все номера страниц . 

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).

1 Ответ

0 голосов
/ 16 апреля 2020

Вы должны прикрепить номер своей страницы к наблюдаемой, которую вы создали из 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 }
...