微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

MatPaginator & MatTableDataSource - 更改总大小

如何解决MatPaginator & MatTableDataSource - 更改总大小

我将 MatPaginator 与 MatTableDataSource 一起使用,当我将数据分配给 dataSource 时,它​​会更改我分配给 MatPaginator 的长度。因此,当我加载 nextpage、排序或过滤时,dataSorce 会更改长度并且无法继续分页

我的代码

  public dataSource = new MatTableDataSource<Permission>();
  pageSize!: number;
  pageIndex!: number;
  length!: number;

  @ViewChild(MatPaginator)
  paginator!: MatPaginator;

  ngAfterViewInit(): void {
    this.dataSource.paginator = this.paginator;
}
      
  handlePageEvent(event: PageEvent) {
    this.loading = true;
    this.pageSize = event.pageSize;
    this.pageIndex = event.pageIndex + 1;
    this.loadDatabase();
  }

  datab: Permission[] = [];
  loadDatabase() {
    this.permissionService
      .showAllPermissions(this.filter,this.pageSize,this.pageIndex,this.sortColumn,this.sortOrder)
      .subscribe(
        result => {

          const d = result.data as Permission[];
          d.forEach(r => {
            if (!this.datab.some(x => x.id === r.id)) {
              this.datab.push(r);
            }
          });

          this.dataSource.data = this.datab as Permission[];
          this.length = result.paginatorInfo.total;

          this.loading = false;
        });
  }
}

HTML

<table mat-table [dataSource]="dataSource" class="center" matSort (matSortChange)="sortData($event)">



<mat-paginator (page)="handlePageEvent($event)" [pageSize]=pageSize [length]="length" [pageIndex]="pageIndex-1">
</mat-paginator>

加载时:

On Load

下一页之后:

After Click Next Page

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。