如何使用Angular获取ngx分页中的最后页码

问题描述

我们如何在ngx-pagination中使用自定义模板，并在单击时使第一个按钮和最后一个按钮正常工作，我已经使用了pagination-template来实现相同的目的...

我如何动态找到最后一个页码？

<ul class="meal-list">
  <li *ngFor="let meal of meals | paginate: config">
    {{ meal.id }}
    {{ meal.name }}
  </li>
</ul>

<pagination-template
  #p="paginationApi"
  [id]="config.id"
  (pageChange)="config.currentPage = $event"
>
  <div class="custom-pagination">
    <div class="pagination-first" [class.fade]="p.isFirstPage()">
      <a *ngIf="!p.isFirstPage()" (click)="p.setCurrent(1)">First</a>
    </div>
    <div class="pagination-prevIoUs" [class.disabled]="p.isFirstPage()">
      <a *ngIf="!p.isFirstPage()" (click)="p.prevIoUs()"> < </a>
    </div>

    <div
      *ngFor="let page of p.pages"
      [class.current]="p.getCurrent() === page.value"
    >
      <a
        (click)="p.setCurrent(page.value)"
        *ngIf="p.getCurrent() !== page.value"
      >
        <span>{{ page.label }}</span>
      </a>
      <div *ngIf="p.getCurrent() === page.value">
        <span>{{ page.label }}</span>
      </div>
    </div>

    <div class="pagination-next" [class.disabled]="p.isLastPage()">
      <a *ngIf="!p.isLastPage()" (click)="p.next()"> > </a>
    </div>
    <div class="pagination-last" [class.disabled]="p.isLastPage()">
      <a *ngIf="!p.isLastPage()" (click)="p.setCurrent(4)">Last</a>
    </div>
  </div>
</pagination-template>

解决方法

您可以结合使用 setCurrent 和 getLastPage 来实现这一点

示例

<div class="pagination-last" [class.disabled]="p.isLastPage()">
  <a *ngIf="!p.isLastPage()" (click)="p.setCurrent(p.getLastPage())">Last</a>
</div>