Как использовать 2 пагинации для одного стола в таблице угловых материалов?

Question

Я создаю приложение в angular6 с угловым материалом.Как использовать 2 нумерации страниц в одной таблице. Я хочу показать нумерацию страниц в верхнем и нижнем колонтитулах.

В нумерации заголовков отображаются только «Элементы на странице» с раскрывающимся списком.В нумерации страниц нижнего колонтитула появится стрелка и все.

Когда я добавляю 2 нумерации страниц, вторая не работает.

См. Скриншоты

Спасибо.

Answer 1

Я не думаю, что на данный момент существует официальное решение для этого, и вы должны синхронизировать оба пагинатора самостоятельно.

Сконфигурируйте первый paginator, как вам нравится, и добавьте все входные параметры ко второму:

<mat-paginator #paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

<table mat-table [dataSource]="dataSource"> <!-- ... --> </table>

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

В ваш компонент добавьте метод для синхронизации первого paginator, если используется второй:

dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);

@ViewChild(MatPaginator) paginator: MatPaginator;

ngOnInit() {
  this.dataSource.paginator = this.paginator;
}

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

Я разбудил этот официальный пример и обновил его, чтобы воспроизвести вашу проблему. Здесь - мое решение.