1

我正在研究 ngx-pagination，在这里我必须显示该特定页面中存在的记录数。例如：如果我将每页的项目数设置为10，那么在第1页，它必须显示1-10，如果第2页：它必须显示11-20，如果每页的项目数是50，那么它必须是1 -49、50-99 等等..

HTML：

 <pagination-controls (pageChange)="pageChanged($event)" class="my-pagination"></pagination-controls>

在表中我使用的是管道分页，它链接到 ngx 分页：

<tr  *ngFor="let agent of agentList | paginate: config)">

在 Ts 中：

 public config = {
    itemsPerPage: 10,
    currentPage: 1,
    totalItems: 0
  };

演示

在这里，如果我在第 1 页，我需要显示 1-10 显示等等

4

1 回答 1

1

将代码更新到您已添加链接的演示中，请参阅下面的代码，我在该堆栈闪电战中更新了无法共享它。

在 .ts 文件中

  config: any;
  constructor() {
      this.config = {
      currentPage: 1,
      itemsPerPage: 10,
      totalItems:0
   };
 this.config.currentPage= 1;
  for (let i = 1; i <= 100; i++) {
      this.collection.push(`item ${i}`);
    }
  }

  public setItemsPerPage(event) {
      this.config.itemsPerPage = event
  }
  pageChange(event){
    this.config.currentPage = event;
  }

在 HTML 中

<ul>
    <li *ngFor="let item of collection | paginate: config">{{ item }}</li>
 </ul>
    <div class="col-auto">
                                    <select class="custom-select" (change)="setItemsPerPage(page.value)" #page>
                                        <option selected>10</option>
                                        <option>50</option>
                                        <option >100</option>
                                        <option >500</option>
                                    </select>
                                </div>

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

希望对你有帮助

让我知道如果不工作..

谢谢

于 2019-12-30T13:08:28.957 回答