Идеи пагинации для Angular2 и ReactiveX

Question

Я учу ReactiveX. Я обрезал проверку ошибок, ведение журнала и другие биты, чтобы их было легче читать.

У меня есть сервис, который возвращает коллекцию объектов в виде JSON:

getPanels() {
    return this.http.get(this._getPanelsUrl)
        .map(panels => <Panel[]> panels.json());            
}

Мой компонент вызывает метод service и сохраняет данные в массиве:

panels: Panel[] = [];

ngOnInit(){
    this._PanelService.getPanels()
        .subscribe(data => this.panels = data);  
}

Цель состоит в том, чтобы отобразить эти данные в группах в моем шаблоне:

<ol>
    <li *ngFor="#panel of panels">
      <h3>{{panel.startDate}}</h3>
    </li>
</ol>

Теперь я хочу добавить нумерацию страниц и отображать только три или четыре панели одновременно.

Моей первой идеей было использование bufferCount для генерации объектов в группах:

getPanels() {
    return this.http.get(this._getPanelsUrl)
        .map(panels => <Panel[]> panels.json())
        .bufferCount(3,3);
}

Теперь у меня есть многомерный массив, поэтому я должен соответствующим образом обновить компонент:

panels: Array<Panel[]> = [];

ngOnInit(){
    this._PanelService.getPanels()
        .subscribe( data => this.panels = data );
}

Я думал, что у меня будет хороший и аккуратный массив с каждым индексом, имеющим три члена коллекции. Я был неправ, и вся коллекция теперь хранится в данных [0]. Затем я попытался немного переключить цепь:

getNextPanel() {
    return this.http.get(this._nextPanelUrl)
        .bufferCount(3,3)
        .map(res => <Panel[]> res.map(r => <Panel> r.json()));
}

Вау. Очевидно, мне нужен кто-то, чтобы спасти меня от самого себя. Посмотри на мои лямбды! На этом этапе данные даже не будут возвращаться к компоненту. Именно тогда я начал думать, может быть, мне не нужно учиться делать это способом ReactiveX….

Следующим моим курсом было попытаться перебрать значения в Angular. Я попытался использовать несколько переменных с конвейером:

<ol>
    <li *ngFor="#panel of (panels | slice:start:items)">
        <h3>{{panel.startDate}}
    </li>
</ol>
<button (click)="start = start + start"></button>

Несмотря на то, что Angular 2 все еще находится в бета-версии, я мог сказать, что устал, когда парсер продолжал лаять на меня за использование операторов и выражений, которые им не принадлежат.

Я готов учиться на этих ошибках, чтобы я мог сделать больше. Какие-либо предложения?

[РЕДАКТИРОВАТЬ]

Я решил использовать ng2-pagination, потому что он делает именно то, что я хочу. Однако я не собираюсь публиковать это как ответ, потому что я все еще хочу попробовать и реализовать его с помощью rxjs.

Так что, если вы зашли так далеко, и вам просто нужно что-то, что работает, ng2-нумерация страниц (в бета-версии 2 на момент написания статьи) работает очень хорошо.

Answer 1

Действительно поздно, но я надеюсь, что это может помочь кому-то еще в этом вопросе.

Я думаю, что проблема с вашей реализацией в том, что вы перезаписываете переменную this.panel каждым событием onNext на подписчике.

С этим изменением должно работать как положено:

getPanels() {
  return this.http.get(this._getPanelsUrl)
    .map(panels => <Panel[]> panels.json())
    .bufferCount(3)
    .toArray();
}

а потом:

panels: Panel[][] = [];
ngOnInit(){
    this._PanelService.getPanels()
      .subscribe( data => { this.panels = data } );
}

Идея состоит в том, чтобы объединить все события onNext в массив (используя метод toArray), который будет генерироваться как один onNext этого нового Observer и будет содержать все события.