如何使用 Angular 获取 ngx-pagination 中的最后一个页码

Question

我们如何在 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>

Answer 1

您可以同时使用setCurrent 和getLastPage 来实现这一目标

例子

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