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

哇。在这一点上，我显然需要有人来救我自己。看看我的lambdas！此时数据甚至不会一直流回到组件。这是我开始思考的时候也许我不需要学习如何以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-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发出，并将包含所有事件。

Angular2和ReactiveX的分页思路

1 个答案: