Currently, I am diving into the world of ReactiveX. To make things easier to understand, I have removed error checking, logging, and other unnecessary bits.
One of my services returns a collection of objects in JSON format:
getPanels() {
return this.http.get(this._getPanelsUrl)
.map(panels => <Panel[]> panels.json());
}
My component invokes this service method and stores the received data in an array:
panels: Panel[] = [];
ngOnInit(){
this._PanelService.getPanels()
.subscribe(data => this.panels = data);
}
The objective is to show this data grouped in my template:
<ol>
<li *ngFor="#panel of panels">
<h3>{{panel.startDate}}</h3>
</li>
</ol>
Now, I am interested in implementing pagination and displaying only three or four panels at a time.
Initially, I thought of using bufferCount to emit objects in groups:
getPanels() {
return this.http.get(this._getPanelsUrl)
.map(panels => <Panel[]> panels.json())
.bufferCount(3,3);
}
As a result, I now have a multidimensional array, hence I need to update the component accordingly:
panels: Array<Panel[]> = [];
ngOnInit(){
this._PanelService.getPanels()
.subscribe(data => this.panels = data);
}
To my surprise, instead of a nicely organized array with each index containing three members from the collection, the entire collection is now stored in data[0]. So, I attempted reordering the sequence of operations:
getNextPanel() {
return this.http.get(this._nextPanelUrl)
.bufferCount(3,3)
.map(res => <Panel[]> res.map(r => <Panel> r.json()));
}
Well, it seems like I am in deep waters now. Judging by my lambdas and code structure, it's evident that the data flow might get halted midway without reaching the component. At this point, I started questioning whether I really need to adhere strictly to the ReactiveX approach.
Next, I decided to attempt iterating through values in Angular itself. I experimented with some variables using the slice pipe:
<ol>
<li *ngFor="#panel of (panels | slice:start:items)">
<h3>{{panel.startDate}}
</li>
</ol>
<button (click)="start = start + start"></button>
Despite being aware that Angular 2 is still in beta, I found myself stumbling as the parser kept flagging me for misusing operators and expressions where they weren't supposed to be. It was clearly a sign of my growing fatigue.
I am willing to learn from these missteps and embrace bigger challenges in the future. Do you have any advice or suggestions?
[EDIT]
Ultimately, I opted to utilize ng2-pagination as it precisely meets my requirements. Although it provides a working solution, I refrained from marking it as the answer since I am determined to try and implement the functionality using rxjs.
If you have reached this point and are seeking a functional solution, give ng2-pagination (currently in beta 2) a shot as it works quite effectively.