3

我正在学习 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 方式来做到这一点……。

我的下一门课程是尝试使用 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 中）效果很好。

4

1 回答 1

0

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

我认为您的实现的问题是您正在用订阅者上的每个 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 发出，并将包含所有事件。

于 2018-06-11T22:23:31.103 回答