Angular2将列表元素限制为特定数量

我有一个作为材料卡片填充的列表。由于列表可能会变大，我希望它一次限制为5个元素，然后让用户可以选择查看下一个元素（分页？）

{{任务。什么}}

编辑

它看起来如下所示：

---

如何实现它？

您可以使用slice pipe，并将开始和结束作为组件端的分页变量：

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

{{任务。什么}}

编辑

在任何用户事件中设置开始和结束的值，例如（单击）

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