Material Angular Paginator 翻页事件-详细内容

文章内容

2020/8/27 14:55:14,作者: 黄兵

Material Angular Paginator 翻页事件

最近在使用Material Angular Paginator组件，按照官方示例，如何获取翻页事件，代码如下：

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

notices.component.ts:

// MatPaginator Inputs
length: number;
pageSize = 10;
pageSizeOptions: number[] = [5, 10, 25, 100];

// MatPaginator Output
pageEvent: PageEvent;

getNotices($event: PageEvent): any {
  // 点击paginator事件，获取pageIndex，重新加载页面
  this.pageIndex = $event.pageIndex;
  this.pageSize = $event.pageSize;
  this.notices();
}

notices() {
  this.sub = this._noticeService.getNotice(this.pageIndex, this.pageSize).subscribe(res => {
    this.result = res.notices;
    this.showMore = res.count > 10;
    this.length = res.count;
  }, (error: any) => {
    this.errorMessages.push({description: 'Server error. Try later.'});
    this.childError.emit(this.errorMessages);
    this._logService.error(error, `path: ${this.path}`, 'function: notices()');
  });
}