如何解决当我单击 Angular 的 mat-paginator 的按钮时,有什么方法可以调用函数
在 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;
}
)
}
解决方法
分页器组件为您处理整个分页逻辑。你不处理点击它的按钮。该组件有一个 page
事件,您可以使用它来处理页面更改。
<mat-paginator [length]="length"
[pageSize]="pageSize"
[pageSizeOptions]="pageSizeOptions"
(page)="yourPageChangeLogic($event)">
</mat-paginator>
,
在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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。