如何使用ngx分页显示特定页面中存在的记录数

Question

我在ngx分页上工作，在这里我必须显示该特定页面中存在的记录的数量。例如:如果我将每页的项目数设置为10，那么在页码1中，它必须显示1-10，如果页码2:它必须显示11-20，如果每页的项目数是50，那么它必须是1-49，50-99，依此类推。

HTML：

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

在表中，我使用了管道分页，它链接到ngx-pagination：

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

在Ts中：

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

Demo

在这里，如果我在page1上，我需要显示1-10等等

Answer 1

更新代码到演示中，你已经添加了链接，请参阅下面的代码，我在stackblitz中更新了它，不能分享它。

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

希望这能对你有所帮助

如果不能工作，请告诉我。

谢谢