Получение неправильного значения разбивки на страницы для второй страницы с использованием Angular8

Question

Я столкнулся с проблемой нумерации страниц при использовании материала Angular8. Я объясняю свой код ниже.

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

Код машинописного текста приведен ниже.

@ViewChild(MatPaginator,{static: false}) 
  paginator: MatPaginator;
  @ViewChild(MatSort,{static: false}) 
  sort: MatSort;
totalCount: number=0;
sortDir           : any = 'desc';
sortName          : any = 'CreatedDate';
pageSize: number = 10;
pageIndex : number = 0;
dataSource = new MatTableDataSource<Orders>([]);

ngOnInit() {
  this.dataSource.paginator = this.paginator;
  this.dataSource.sort    = this.sort;
}
ngAfterViewInit() {
    this.dataSource.paginator = this.paginator
  }
getOrders(sortFilterSsettings: any) {
    this.dataLoaded = false;
    if(this.userType === 'institute') {
      this.urlType = 'institutes/my-edp-orders';
    }
    if(this.userType === 'chainschools') {
      this.urlType = 'chairman/my-edp-group-orders';
    }

    this.api.orderGridService(this.userToken, this.urlType, sortFilterSsettings).subscribe((res: any) => {
      if(res && res['status'] === true) {
        this.totalCount         = res['total_items'] || 0;
        this.data               = res['orders'] || [];
        this.ordereData         = this.data;
        this.dataSource.data    = this.ordereData;
      } else {
        this.totalCount         = 0;
        this.dataSource.data    = [];
      }
      //console.log('res', this.dataSource.data,this.totalCount,this.pageIndex,this.pageSize);
      this.dataSource.paginator = this.paginator;
      this.dataLoaded         = true;
    },
    (error: any) => {
      console.log(error);
      alert('Something went wrong, we are not able to list orders.');
    });
  }
pageChange() {
    this.pageIndex = this.paginator.pageIndex;
    this.pageSize = this.paginator.pageSize;
    const sortFilterSsettings = {
      filtered: this.formFilter.value,
      pageSize: this.pageSize,
      page: this.pageIndex,
      sort: []
    }

    this.getOrders(sortFilterSsettings);
  }

Здесь для 1-й загрузки данных и для 1-й страницы он работает, как ожидалось, но когда пользователь нажимает следующая иконка пагинатора данные заполняются, но totalCount отображается неверно в пользовательском интерфейсе разбивки на страницы, где this.totalCount значение отличается. Допустим, для второй страницы pageSize = 10 and pageIndex = 1, отправленной на сервер, и в ответе сервера я могу получить this.totalCount=331, но в пользовательском интерфейсе разбиения на страницы в сетке отображается 1 – 10 of 10, что неверно. На самом деле на следующей странице должно отображаться 11 – 20 of 331. Он работает нормально для первой страницы, но следующая страница не работает. Мне нужно решить эту проблему.