angular - Mat-pagination 不适用于 Angular 8

Question

我有一个带有分页选项的项目。https://stackblitz.com/edit/angular-sjp8qq

但是mat-pagination标签的属性与应用程序逻辑无关。有人可以告诉我为什么吗？

Answer 1

以下是我如何在我正在调整以适应您的代码的应用程序中使用 mat-pagination，希望这会有所帮助。

JS

totalElements = 20;
elementsPerPage = 5;
currentPage = 1;
pageSizeOptions = [5, 10, 20];


fillDataSource() {
 this.arraySource = []; // clear so we can repopulate
 for ( let i = 0; i < this.arraySize; i++) { 
   if (this.elementsPerPage &&  this.currentPage) {
     if (i > (this.elementsPerPage * (this.currentPage - 1)) && i <= (this.elementsPerPage * (this.currentPage))) {
      this.arraySource.push(this.arrayTemplate)
     }
   }
 }
 this.data = new MatTableDataSource(this.arraySource)
}

onChangedPage(pageData: PageEvent) {
 this.currentPage = (pageData.pageIndex + 1);
 this.projectsPerPage = pageData.pageSize;

 this.fillDataSource();
}

HTML

 <mat-paginator
  #paginator
  [length]="totalElements"
  [showFirstLastButtons]="true"
  [pageSizeOptions]="pageSizeOptions"
  [pageSize]="elementsPerPage"
  (click)="onChangedPage($event)">
 </mat-paginator>