Angular 角度材质分页未按预期工作

我已经在我的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);
  }

filterSettings:any={}；
排序设置：any={sort:{updated_at:'desc'}}；
分页：any={paging:{page:0，limit:10}；
排序键：任意=[
{key:'updated_at'，name:'Date updated'}，
{key:'created_at'，name:'Date created'}
];
sortdirection:any=['asc'，'desc']；
删除项目：任何；
公共当前页面：编号=0；
getFilteredProducts（sortFilterSsettings:any）{
log（'filter settings'，sortfiltersettings）；
this.productsService.getAllProducts（sortFilterSsettings）
.订阅（res=>{
log（'res-pro'，res['data']）；
this.products=res['data']||[]；
this.filteredProductsArray=this.products；
})
}
onPaginateChange（数据：任意）{
//const offSet=data.pageIndex*data.pageSize；
this.paging={paging:{page:data.pageIndex，size:data.pageSize}；
const sortfiltersettings=extend（this.filterSettings、this.sortSettings、this.paging）；
此.getFilteredProducts（sortFilterSsettings）；
//this.filteredProductsArray=this.products.slice（偏移量，偏移量+数据.pageSize）；
}

---

这里我的问题是我第一次获取

10条记录

并正确显示，但当我选择20条并获取20条记录时，所有20条记录都显示在同一页面中。但根据我的要求，它应该打破每10页和右箭头键将是可见的看到更多。但在这种情况下，所有20条记录都在同一页中。

您能为我们提供一个stackblitz，并举例说明您的问题吗：）？您能为我们提供一个stackblitz，并举例说明您的问题吗：）？