angular - 动态数据分页

Question

我有一个服务调用，我从 HTTP 请求中获取数据，现在数据带有计数和响应，每次响应的计数为 10，但实际上，数据超过 10，如 50，需要分页，意味着后端发送分页数据我在 mat-table 中使用 mat-paginator 来显示分页，它显示了 10 个列表的数据，但是对于剩余的分页不起作用

 <mat-paginator
      hidePageSize
      [length]="count"
      [pageSize]="pageSize"
      (page)="onPaginationChange($event)"
    >
    </mat-paginator>

关于如何做到这一点的任何想法？

data: {
count: 44
result: [,…]
}

这就是我得到的

   public count: number;
   public memberList: ITeamMember[];
   public pageSize: number;

public dataSource: MatTableDataSource<IMemberList> = new MatTableDataSource<
    IMemberList
  >();
  private sort: MatSort;
  private paginator: MatPaginator;

  @ViewChild(MatSort) set matSort(ms: MatSort) {
    this.sort = ms;
    this.setDataSourceAttributes();
  }
  @ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
    this.paginator = mp;
    this.setDataSourceAttributes();
  }

ngOnInit(): void {
    this.isDataLoading = true;
    this.createTeamMemberList();
  }

  private setDataSourceAttributes(): void {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

  ngAfterViewInit(): void {
    this.cd.detectChanges();
  }

public createTeamMemberList(): void {
    this.teamService.getTeamMembers().subscribe(
      (response: TeamMemberResponse) => {
        this.dataSource = new MatTableDataSource<IMemberList>(
          this.individualMember
        );
        this.dataSource.paginator = this.paginator;
        this.pageSize = response.result.length;
        this.count = response.count;
      },
      (error: Error) => {
        this.isDataLoading = true;
        this.sharedService.openErrorSnackBar(error);
      }
    );
  }

标签： angularangular-materialpaginator