angular - 分页在 Angular 材料中无法正常工作

Question

在我的网格视图中，分页无法正常工作。我在下面附上我的观点。

我在下面解释我的代码。

组件文件：

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

<mat-paginator [pageSizeOptions]="[1,10, 25, 50, 100]" [pageSize]="pageSize" [pageIndex]="pageIndex" [length]="totalCount" (page)="pageChange($event)" showFirstLastButtons></mat-paginator>
</table>

.ts file:

@ViewChild(MatPaginator,{static: false}) 
paginator: MatPaginator;
@ViewChild(MatSort,{static: false}) 
sort: MatSort;
dataSource = new  MatTableDataSource<Stores>([]);
pageSize    = 1;
pageIndex   = 1;
totalCount        : number;
ngOnInit() {

    this.dataSource.paginator = this.paginator;

    this.getStores(1, 10);
  }
getStores(page, limit) {
    let sortBy  = this.direction ? this.direction == 'asc' ? this.sortName : '-' + this.sortName : 'updatedAt';
    let filters = {
      "page"        : page,
      "limit"       : limit,
      "sortby"      : sortBy,
      "searchvalue" : this.searchValue || ''
    }
    this.api.getStores(filters).subscribe(x => {
      console.log('xx',x);
      this.data                 = x['data'];
      this.storeData         = this.data;
      this.dataSource.data      = this.storeData;
      this.dataSource.sort      = this.sort;
      // this.paginator.pageIndex  = this.pageIndex - 1;
      this.allchecked           = false;


    });
  }

pageChange(event) {
    this.pageIndex = this.paginator.pageIndex + 1;
    this.getStores(this.paginator.pageIndex + 1, this.paginator.pageSize);
  }

在这里，我总共从数据库中获取了 2 条记录，并且每页我选​​择1了，但是这里所有记录都显示并且分页没有到来。我的要求是，如果每页数小于总记录获取，那么分页应该按预期工作。

标签： angularangular-materialangular-pagination