Angular2 Limit Liste Elemente zu bestimmten Nummer

Question

Ich habe eine Liste als Material Karten bestückt. Da die Liste groß werden kann, möchte ich, dass sie auf 5 Elemente gleichzeitig begrenzt wird und dann dem Benutzer eine Option bietet, um die nächsten Elemente zu sehen (Paginierung?).

<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> 

Und es sieht aus wie folgt:

Wie kann ich es erreichen?

Answer 1

können Sie slice Rohr verwenden und Start und Ende als Paginierung Variable auf der Komponentenseite haben:

<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> 

Einstellwerte Start und Ende in jedem Benutzerereignis sagen, (Klick).