将下拉值绑定到分页项 Per Page Angular 4

Question

我在我的页面上导入了简单的分页，并希望它将每页的项目数绑定到我的下拉列表的值，我该怎么做？

这里有一些代码

     <tr *ngFor="let a of animals | paginate: {itemsPerPage: 8, currentPage: 
  p}>
            <td>{{a.name}}</td>
            <td>{{a.color}}</td> 
     </tr>

和分页控件

   <pagination-controls (pageChange)="p = $event "></pagination-controls>

我添加了简单的下拉菜单，并希望将所选下拉菜单的值绑定到 itemsPerPage，我该怎么做？

  <div class="col-md-offset-11">
        <select id="PerPage" class="form-control">
            <option value="5">5</option>
            <option value="10">10</option>
            <option value="25">25</option>
        </select>
    </div>

Answer 1

您只需通过组件中的 NgModel 持久化 pageSize 并将其用作过滤器的参数：

所以将 select 绑定到一个模型，并使用 ngValue 获取一个实数值（常规值会输出一个字符串）

<div class="col-md-offset-11">
    <select id="PerPage" class="form-control" [(ngModel)]="pageSize">
        <option [ngValue]="5">5</option>
        <option [ngValue]="10">10</option>
        <option [ngValue]="25">25</option>
    </select>
</div>

....
<tr *ngFor="let a of animals | paginate: {itemsPerPage: pageSize, currentPage: p}>
    <td>{{a.name}}</td>
    <td>{{a.color}}</td> 
</tr>

....

// in the component
...
private pageSize: number = 5;
...