Angular2 和 ReactiveX 的分页思路

Question

我正在学习 ReactiveX。我删除了错误检查、日志记录和其他部分，以便于阅读。

我有一个以 JSON 格式返回对象集合的服务:

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

我的组件调用服务方法并将数据存储在数组中:

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 );
}

我想我会得到一个漂亮而整洁的数组，每个索引都包含集合中的三个成员。我错了，整个集合现在都存储在 data[0] 中。接下来，我尝试稍微调高链条:

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

哇。在这一点上，我显然需要有人来拯救我。看看我的 lambda!此时数据甚至不会一路流回组件。这是我开始思考的时候也许我不需要学习如何以 ReactiveX 的方式做到这一点......

我的下一个类(class)是尝试使用 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-pagination(在撰写本文时处于 beta 2 中)效果很好。

Answer 1

真的很晚，但我希望这可以帮助其他人解决这个问题。

我认为您的实现存在问题，您正在使用订阅者上的每个 onNext 事件覆盖 this.panel 变量。

有了这个改变，应该会按预期工作:

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 方法)，该数组将作为新 Observer 的单个 onNext 发出，并将包含所有事件。