Binding 如何在服务器上为HTTP表中的动态数据实现分页

如何绑定分页器，当我将数字f.e.从10更改为5时，它会更改每页的项目。现在我可以更改分页器的编号，但是表和显示的数据是相同的

这是我的HTML组件

 <div class="example-container">
<table mat-table [dataSource]="dataSource"  class="example-table"
 matSort >....

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

....

这是我的打字脚本文件

export class TableHttpExample implements AfterViewInit , OnInit {...

  displayedColumns: string[] = ['CheckboxA','UserName','name', 'vorname', 'email', 'Strasse', 'PLZ'];
  exampleDatabase: ExampleHttpDatabase | null;
  data: User[] = [];
  dataSource = new MatTableDataSource<User>(data);
  resultsLength = null;
  isLoadingResults = true;
  checkbox_list =[];
  isRateLimitReached = false;
  user: User;
  pageSize = 10;
  pageSizeOptions: number[] = [5, 10, 25, 100];
  pageEvent: PageEvent;


   ...

   ngOnInit() {
     this._dataService.getUsers().subscribe((Users: User[]) => this.loadUsers(Users));
     this.checkbox_list = [User];
     this.dataSource.paginator = this.paginator;
     this.dataSource.sort = this.sort;
    };


    loadUsers(Users) {
      this.dataSource = Users;
      this.resultsLength = Users.length;
      this.pageSize = Users.length;
      this.isLoadingResults = false;
    }

导出类TableHttpExample实现AfterViewInit、OnInit{。。。
displayedColumns:string[]=['CheckboxA'，'UserName'，'name'，'vorname'，'email'，'Strasse'，'PLZ']；
exampleDatabase:ExampleHttpDatabase |空；
数据：用户[]=[]；
数据源=新MatTableDataSource（数据）；
resultsLength=null；
isLoadingResults=真；
复选框_list=[]；
isRateLimitReached=假；
用户：用户；
页面大小=10；
页面大小选项：数字[]=[5,10,25,100]；
pageEvent:pageEvent；
...
恩戈尼尼特（）{
this._dataService.getUsers（）.subscribe（（用户：用户[]）=>this.loadUsers（用户））；
this.checkbox_list=[User]；
this.dataSource.paginator=this.paginator；
this.dataSource.sort=this.sort；
};
loadUsers（用户）{
this.dataSource=用户；
this.resultsLength=Users.length；
this.pageSize=Users.length；
this.isLoadingResults=false；
}

在ngOnInit（）中，首先将数据切片为您想要的任意数字

this.dataSource.filteredData.slice(0, pageSize);

然后您应该将$event传递给函数

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

  OnPageChange(event: PageEvent) {
    let startIndex = event.pageIndex * event.pageSize;
    let endIndex = startIndex + event.pageSize;
    this.dataSource.filteredData.slice(startIndex, endIndex);
  }

OnPageChange（事件：PageEvent）{
让startIndex=event.pageIndex*event.pageSize；
让endIndex=startIndex+event.pageSize；
this.dataSource.filteredData.slice（startIndex，endIndex）；
}

在ngOnInit（）中，首先将数据切片为您想要的任意数字

this.dataSource.filteredData.slice(0, pageSize);

然后您应该将$event传递给函数

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

  OnPageChange(event: PageEvent) {
    let startIndex = event.pageIndex * event.pageSize;
    let endIndex = startIndex + event.pageSize;
    this.dataSource.filteredData.slice(startIndex, endIndex);
  }

OnPageChange（事件：PageEvent）{
让startIndex=event.pageIndex*event.pageSize；
让endIndex=startIndex+event.pageSize；
this.dataSource.filteredData.slice（startIndex，endIndex）；
}