Angular2制限の要素を特定の番号に限定する

Question

私はリストに物質カードを設定しました。リストが大きくなることがあるので、一度に5つの要素に制限し、ユーザーに次の要素（ページ区切り？）を表示するオプションを持たせます。

<div class="goal-list-card" *ngFor="let task of tasks| values; let j = index;" 
[ngClass]="{'active': selectedTask == task.taskId}"> 
<div class="strip"></div> 
<div class="card-title"> 
    <p>{{task.what}}</p> 
</div> 
<div class="card-action-button"> 
    <button (click)="editTask(task)" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"> 
     Edit 
    </button> 
</div> 

そしてそれは、次のようになります。

をどのように私はそれを達成することができますか？

Answer 1

あなたはスライスパイプを使用して、コンポーネント側であなたのページネーション変数としてと終了を開始持つことができます任意のユーザーイベントで開始と終了の

<div class="goal-list-card" *ngFor="let task of tasks| values |slice:start:end; let j = index;"[ngClass]="{'active': selectedTask == task.taskId}"> 
    <div class="strip"></div> 
    <div class="card-title"> 
     <p>{{task.what}}</p> 
     </div> 
     <div class="card-action-button"> 
      <button (click)="editTask(task)" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"> 
    Edit 
     </button> 
</div> 

設定値は、クリック（と言います）。