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>

垫分页不适用于Angular 8

1 个答案: