typescript - Sidindelningsidéer för Angular2 och ReactiveX

Jag lär mig ReactiveX. Jag har klippt bort felkontroll, loggning och andra delar för att göra detta lättare att läsa.

Jag har en tjänst som returnerar en samling objekt som JSON:

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

Min komponent anropar tjänstemetoden och lagrar datan i en array:

panels: Panel[] = [];

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

Målet är att visa dessa data i grupper i min mall:

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

Nu vill jag lägga till paginering och visa endast tre eller fyra paneler åt gången.

Min första idé var att använda bufferCount för att sända ut objekten i grupper:

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

Nu har jag en flerdimensionell array, så jag måste uppdatera komponenten därefter:

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

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

Jag trodde att jag skulle ha en fin och ordnad array med varje index som hade tre medlemmar från samlingen. Jag hade fel, och hela samlingen är nu lagrad i data[0]. Därefter försökte jag ändra kedjan lite:

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

Whoa. Jag behöver uppenbarligen någon som kan rädda mig från mig själv vid det här laget. Titta på mina lambdas! Data kommer inte ens att flöda hela vägen tillbaka till komponenten vid det här laget. Det var då jag började tänka kanske behöver jag inte lära mig att göra detta på ReactiveX-sättet … .

Min nästa uppgift var att försöka iterera genom värdena med Angular. Jag försökte använda några variabler med slice-pipen:

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

Även om Angular 2 fortfarande är i beta, kunde jag märka att jag började bli trött när parsern fortsatte att skälla på mig för att jag använde operatorer och uttryck där de inte hör hemma.

Jag är redo att lära mig av dessa misstag så att jag kan göra större. Några förslag?

[REDIGERA]

Jag har bestämt mig för att använda ng2-pagination eftersom det gör exakt det jag vill att det ska göra. Jag kommer dock inte att posta det som svaret, eftersom jag fortfarande vill försöka implementera det med rxjs.

Så om du har kommit så här långt, och du bara behöver något som fungerar, fungerar ng2-pagination (i beta 2 när detta skrivs) mycket bra.

Svar #1

Verkligen sent, men jag hoppas att detta kan hjälpa någon annan med detta problem.

Jag tror att problemet med din implementation är att du skriver över this.panel-variabeln vid varje onNext-händelse på prenumeranten.

Med den här ändringen bör det fungera som förväntat:

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

och sedan:

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

Idén är att slå samman alla onNext-händelser till en array (använda toArray-metoden) som kommer att skickas som det enda onNext från den nya Observatören, och kommer att innehålla alla händelser.