Im calling an API that contain pagination.
For pagination im using ngb-pagination. The request for API is the page number and the response are data to be diplayed. After calling API, when i change from page 1 to 2 its recalling twice the API. With request page = 2 and than with request page = 1. It looks like its reloading the view again and again.
Pagination initialized with page = 1;Please describe the question in detail and share your code, configuration, and other relevant info.
ionViewWillEnter()
{
this.filterUserOntimeFunction(1)
}
function to change the page
onPageChange = (pageNumber) => {
this.filterUserOntimeFunction(pageNumber);
this.pageSize = this.itemsPerPage * (pageNumber - 1);
};
function that call API
filterUserOntimeFunction = (request) => {
this.filterService.filterUserOntime(request).subscribe(data => {
this.dataStore = data['response'];
this.collectionSize = data["response"].length;
this.pageSize = this.collectionSize / 5;
}, error => console.log('Could not load data.', error));
}
code in html just display some data
<div *ngIf="dataStore; else elseBlock">
<ion-grid>
<ion-row class="ion-nowrap">
<ion-col class="text-center" size="6" *ngFor="let j of dataStore">
<ion-card class="myCard" (click)="personSelected(j)">
<ion-img
[src]="j.t_path_immagine"
style="width: max-content"
alt="100"
></ion-img>
<ion-item class="myOverlay">
<div class="subtitle"></div>
<ion-label class="ml-2 card-title">{{j.t_nome}}</ion-label>
</ion-item>
</ion-card>
</ion-col>
</ion-row>
<ngb-pagination
[collectionSize]="collectionSize"
[(page)]="currentPage"
[pageSize]="itemsPerPage"
(pageChange)="onPageChange($event)"
[maxSize]="5"
aria-label="Default pagination"
></ngb-pagination>
<ion-button (click)="logScrollEnd(dataStore.length)"
>Load more</ion-button
>
</ion-grid>
</div>
<ng-template #elseBlock> Data is loading. Please wait </ng-template>
Result its like in image below
1 post - 1 participant