angular - 角度材料分页未按预期工作

Question

我已经在我的 UI 中实现了角度分页，但有时它无法按预期工作。我在下面解释我的代码。

<mat-paginator (page)="pageEvent = $event; onPaginateChange($event)" [length]="products?.length || 0" [pageIndex]="currentPage" [pageSize]="10" [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>


filterSettings: any = {};
sortSettings: any = {sort: {updated_at: 'desc'}};
paging: any = {paging: {page: 0, limit: 10}};
sortKeys: any = [
    {key: 'updated_at', name: 'Date Updated'},
    {key: 'created_at', name: 'Date Created'}
];
sortDirections: any = ['asc', 'desc'];
deleteItem: any;

public currentPage : number = 0;

getFilteredProducts(sortFilterSsettings: any) {
    console.log('filter settings',sortFilterSsettings);

    this.productsService.getAllProducts(sortFilterSsettings)
      .subscribe(res => {
        console.log('res pro',res['data']);
        this.products = res['data'] || [];
        this.filteredProductsArray = this.products;
      })
  }
onPaginateChange(data: any) {
    // const offSet = data.pageIndex * data.pageSize;
    this.paging = {paging: {page: data.pageIndex, size: data.pageSize}};
    const sortFilterSsettings = extend(this.filterSettings, this.sortSettings, this.paging);
    this.getFilteredProducts(sortFilterSsettings);

    // this.filteredProductsArray = this.products.slice(offSet, offSet + data.pageSize);
  }

在这里，我的问题是我第一次获取10 records并正确显示，但是当我选择 20 并获取 20 条记录时，所有 20 条记录都显示在同一页面中。但根据我的要求，它应该分成第 10 页，并且可以看到右箭头键以查看更多内容。但在这种情况下，所有 20 条记录都在同一页面中。

标签： angularangular-materialangular-pagination