Блог

Проблема у меня есть список идентификаторов, которые я могу загрузить дешево, загрузка сведений для каждого из них обходится дороже.

Итак, я хочу загрузить весь список «объектов идентификаторов», подписаться на поток, получить первые 5 и по щелчку мыши получить следующие 5 (перелистывание вперед и назад).

Затем я сделаю запрос xhr для каждого элемента в текущем пакете.

 var clicks = Rx.Observable.fromEvent($nextPageButton, 'click')
var arrayObs = Observable.from([{id:3}, {id:2}, {id:1}, {id:6}, {id:5}, {id:4}]);
  

Я пробовал бесчисленные способы сопоставления слияния и т.д. Не могу освоиться с этим.

простой плунжер

https://plnkr.co/edit/W83d3xftZv25YqhOF8uL?p=preview

Если вы хотите использовать только наблюдаемые, вы можете сделать следующее

 let page = 0;
let size = 3;

let arrayObs = Observable.from([{id:3}, {id:2}, {id:1}, {id:6}, {id:5}, {id:4}]);

// Click observables that emit the page we want to display.
let clickPreviousObs = Observable.fromEvent(this.prevButton.nativeElement, 'click').map(() => {
  page--;
  return page;
});
let clickNextObs = Observable.fromEvent(this.nextButton.nativeElement, 'click').map(() => {
  page  ;
  return page;
});

// Merge click observables so there is only one observable that emit the page, and start with the first page.
let pageObs = Observable.merge(clickPreviousObs, clickNextObs).startWith(page);

// When I get a new page, get the corresponding ids.
let resultObs = pageObs.flatMap((currentPage) => {
  console.log('Page ', currentPage);
  return arrayObs.skip(currentPage * size).take(size);
});

resultObs.subscribe((res) => {
  console.log('Result', res);
});
  

См . plunkr