如何在 Angular 分页中仅显示 10 个页码以及第一个和最后一个按钮

Question

我试图只显示 10 个页码并包括第一个和最后一个按钮，而不是所有可能的按钮。

我的代码：

<nav aria-label="...">
    <ul style="margin-left: 180px;margin-top:-10px;" class="pagination"  *ngIf="phoneNumberPage?.content" >
      <li *ngFor="let page of ' '.repeat(phoneNumberPage.totalPages).split(''), let i = index " (click)="getPageClient(i)" [class.active]="i === selectedPage" class="page-item"><a class="page-link" href="#">{{i}}</a></li>
    </ul>
  </nav>

它是这样来的：

0
1
2
3
4
5
6
7
8
9
10
11
12
13

我应该做些什么改变使它看起来像：

  First 1 2 3 4 5...Last

Answer 1

如果您想创建自己的分页器，似乎还有很多工作要做。我不会为你编写完成的代码，但我可以添加一些指针让你继续前进。

首先，您可以硬编码First 和Last 按钮，并添加一些显示条件（例如，如果您在第一页，则不要显示First）

您可以在锚标记中添加条件，（例如<a *ngIf="index < 10">）当然，您需要根据用户所在的页面为显示条件添加额外的逻辑。也许您可以在组件中存储一个额外的变量：currentPage，然后您可以从 currentPage 启动 *ngFor。