0

I'm having an issue when using the material paginator. It retrieves the data correctly and the paginator data is updating correctly specifically the pageIndex is incrementing correctly but the items number does not update as shown below. I believe this is because of the onChangedPage($event) function because when I remove it everything works correctly but my data is of course not updated then.

screen shot of the item count

I'm wondering what could be causing this to not work considering the pageIndex is working correctly here is my code for the paginator. My code is dynamic.

html:

<mat-paginator
      [length]="totalMessages"
      [pageSize]="messagesPerPage"
      [pageSizeOptions]="pageSizeOptions"
      (page)='onChangedPage($event)'
    ></mat-paginator>

TS:

onChangedPage(pageData: PageEvent) {
console.log(pageData);
this.currentPage = pageData.pageIndex + 1;
const endingIndex = this.messagesPerPage * this.currentPage;
const startingIndex = endingIndex - this.messagesPerPage;
this.isLoading = true;
console.log(endingIndex);
console.log(startingIndex);
this.Service
.getFunction(this..ticketNumber, startingIndex, endingIndex)
.subscribe(data => {
****taken out for security reasons
 }

Summary: Essentially I am paginating over an embedded array in a Mongo DB document and using the $slice method. My backend logic is fine I'm retrieving everything correctly but for some reason the paginator is not updating the position of the items I'm retrieving. Any help would be greatly appreciated thank you!

1 Answers1

0

If anyone runs into this type of issue. I figured out the issue was because I was using a loading spinner during my call to the back-end for data. This changed the view and reset the page data. Once I removed the spinner it now works as expected.