Настройте компонент пагинатора из углового материала в соответствии с моими требованиями - PullRequest
Новая
       39

Настройте компонент пагинатора из углового материала в соответствии с моими требованиями

0 голосов
/ 30 апреля 2019

В моем приложении есть компонент, в котором строки заполняются с использованием таблицы угловых материалов. Поскольку разбиение на страницы на стороне сервера реализовано, ответ json приведен ниже.

list - объект, содержащий записи таблицы.
next, first, last, previous - эти ссылки на объекты, которые будут предоставлять данные следующей / первой / предыдущей / последней страницы.

Мне нужно присвоить значения next, first, last, previous кнопкам разбивки на угловые материалы.

imageshowFirstLastButtons">

Есть ли способ настроить кнопки нумерации страниц? Пожалуйста, дайте мне несколько предложений.

JSON-ответ: 

{  
list: [],  
totalRecords: 100,  
message: "Patient search successfull",  
next: "http://localhost:8084/findPatient/?page=2&size=10&patientId=&patientFirstName=&patientLastName=",  
first: "http://localhost:8084/findPatient/?page=0&size=10&patientId=&patientFirstName=&patientLastName=",  
last: "http://localhost:8084/findPatient/?page=9&size=10&patientId=&patientFirstName=&patientLastName=",  
previous: "http://localhost:8084/findPatient/?page=0&size=10&patientId=&patientFirstName=&patientLastName=",  
size: 10,  
currentPage: 1
}

Веб-приложение, созданное с использованием Angular 7 и Spring Boot. Поскольку я новичок в Angular, я не знаю, как создать пользовательскую директиву для нумерации страниц.

1 Ответ

0 голосов
/ 30 апреля 2019

Вы можете использовать PageEvent для управления поведением пагинатора 

<mat-paginator [length]="length"
              [pageSize]="pageSize"
              [pageSizeOptions]="pageSizeOptions"
              (page)="onPageEvent($event)">
</mat-paginator>

onPageEvent(event: PageEvent) {
   this.yourService.loadData(event.pageIndex).....;
}
...