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>

ここで、ページネーションを追加して、一度に 3 つまたは 4 つのパネルのみを表示したいと考えています。

私の最初のアイデアは、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 );
}

各インデックスがコレクションの 3 つのメンバーを持つ、きれいで整頓された配列が得られると思いました。私は間違っていました。コレクション全体がdata[0]に保存されています。次に、チェーンを少し上に切り替えてみました。

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

おっ。この時点で、私を自分から救ってくれる人が明らかに必要です。私のラムダを見てください！この時点では、データがコンポーネントに完全に戻ることさえありません。これは、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 (この記事の執筆時点ではベータ 2) が非常にうまく機能します。

4

1 に答える 1