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

将下拉值绑定到paginations itemsPerPage Angular 4

1 个答案: