Как отображать только 10 номеров страниц и первую и последнюю кнопки в Angular нумерации страниц - PullRequest
Новая
       23

Как отображать только 10 номеров страниц и первую и последнюю кнопки в Angular нумерации страниц

0 голосов
/ 10 апреля 2020

Я пытаюсь отобразить только 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

1 Ответ

0 голосов
/ 10 апреля 2020

Похоже, что вам не хватает работы, если вы хотите создать свой собственный paginator. Я не буду писать готовый код для вас, но я могу добавить несколько указателей, чтобы вы могли начать работу.

Во-первых, вы можете жестко закодировать кнопки First и Last, а также добавить некоторые условия отображения (например, если вы находитесь на первой странице, не показывайте First)

Вы можете добавить условное выражение к своему тегу привязки (например, <a *ngIf="index < 10">). Конечно, вам нужно добавить дополнительные логи c на ваше состояние отображения в зависимости от того, на какой странице находится пользователь. Возможно, вы могли бы сохранить дополнительную переменную: currentPage в своем компоненте, а затем вы могли бы запустить * ngFor из currentPage.

...