当我单击Angular的mat-paginator按钮时，有什么方法可以调用函数答案

【问题标题】：Is there any way to call a function when I click the button of the mat-paginator of Angular当我单击Angular的mat-paginator按钮时，有什么方法可以调用函数
【发布时间】：2021-05-27 06:02:38
【问题描述】：

在 4 个按钮中，我想将其中一个用作下一页按钮。如何做到这一点？
这是分页器 HTML

<mat-paginator 
   [pageSize]="2"
   [pageSizeOptions]="[2, 4, 6]" showFirstLastButtons>         
</mat-paginator>

这些是打字稿代码的相关部分

recordsDataTable:any[]=[ ];
recordsData !: MatTableDataSource<any>;

@ViewChild(MatPaginator) paginator!: MatPaginator;

ngAfterViewInit()
{
  
   this.userservice.getRecords()
   .subscribe(
     (x)=>
       { 
        this.recordsDataTable=x.data;
        this.recordsData= new MatTableDataSource(x.data); 
        this.recordsData.paginator = this.paginator;
             
       }
      )

}

【问题讨论】：

标签： angular typescript angular-material paginator mat-pagination

【解决方案1】：

在 Angular Material 中，Paginator 带有一个事件 > (page)="getPageDetails($event)"。该事件为我们提供了有关表的信息。

在component.ts文件中

getPageDetails(event:any) {
  console.log(event);
}

在component.html文件中

 <mat-paginator showFirstLastButtons
             [length]="totalDataLength"
             [pageSize]="pageSize"
             [pageSizeOptions]="pageOptions"
             (page)="getPageDetails($event)"></mat-paginator>

示例链接：https://stackblitz.com/edit/angular-pyix6j?file=src/app/table-pagination-example.html

【讨论】：

【解决方案2】：

Paginator 组件为您处理整个分页逻辑。你不处理点击它的按钮。该组件有一个page 事件，您可以使用它来处理页面更改。

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

【讨论】：

我的表格分为 2 个页面，通过 API reqres.in/api/users?page=1 和 reqres.in/api/users?page=2 访问。一旦使用分页器遍历 API 1 上的数据，那么我必须加载 API 2 ...但在数据结束时，分页器的下一个按钮被禁用。所以我无法从第二个 API ...即使到达最后一页，有没有办法启用下一个按钮？我将两个数据连接成一个，然后将其分配给 MatTableDataSource 和分页器......但我需要使用页面事件......