Quantcast
Channel: Ionic Framework - Ionic Forum
Viewing all articles
Browse latest Browse all 48979

Ionic 5 keeps reloading same page after API subscription

$
0
0

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

Screenshot from 2021-08-02 06-20-45

1 post - 1 participant

Read full topic


Viewing all articles
Browse latest Browse all 48979

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>