Angular один стол с двумя пагинаторами - PullRequest
Новая
       49

Angular один стол с двумя пагинаторами

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

Я строю Angular GUI из компонентов, основанных на материале lib: https://material.angular.io/

У меня есть страница с таблицей и нижним пагинатором. Я хочу предложить те же настройки подкачки в верхней части страницы. Но таблица допускает только один случай разбивки на страницы: 

get paginator (): MatPaginator | zero;
set paginator (paginator: MatPaginator | null);
private _paginator;

Я нашел много решений для двух таблиц с собственными страницами на одной странице. Но это не тот случай.

Итак, есть ли способ соединить 2 пагинатора в одну таблицу ?

Спасибо, МБ

1 Ответ

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

Учитывая, что это ваш главный пагинатор: 

<mat-paginator [length]="totalRecords" [pageSize]="10" [pageSizeOptions]="[10, 25, 50]"></mat-paginator>

Вы можете добавить второй пагинатор, свойства которого связаны с первым пагинатором (это гарантирует, что при изменении первого пагинатора изменения будут отражены во втором 1) и подключите его (страницу) к событию, чтобы убедиться, что изменения будут отражены в первом paginator (и, тем самым, в источнике данных): 

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

В вашем файле .ts вам нужно захватить первый пагинатор (или захватить компонент по id, если есть еще несколько пагинаторов): 

  @ViewChild(MatPaginator)
  paginator: MatPaginator;

и определить функцию для синхронизации c обоих пагинаторов: 

  syncMainPaginator(event: PageEvent) {
    this.paginator.pageIndex = event.pageIndex;
    this.paginator.pageSize = event.pageSize;
    this.paginator.page.emit(event);
  }

Make убедитесь, что основной (первый) paginator подключен к MatTableDataSource.

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

...