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

时间:2017-05-22 16:26:27

标签: angular

我有一张填充为素材卡的清单。由于列表可能会变大,我希望它一次限制为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>

看起来如下:

enter image description here

我怎样才能实现它?

1 个答案:

答案 0 :(得分: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>

在任何用户事件中设置开始结束的值,例如(点击)。