角材料分页无法正常工作

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条记录都在同一页面中。