Problem with infinite-scroll

Ionic Framework
#1

Hello there,

I’m quite new with Ionic and I don’t understand how the component “infinite-scroll” works.
A lot of tutorials about this component are made with a random user generator on Internet, but I would like to do it with datas I made myself, such those ones :

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { InfiniteScroll } from 'ionic-angular';

@Component({
  selector: 'page-administrateur',
  templateUrl: 'administrateur.html'
})
export class Administrateur {
  infiniteScroll: InfiniteScroll;
  users = [
    {firstName : "Julie", lastName : "Aubret", mail : "julieaubret@outlook.fr"},
    {firstName : "Thomas", lastName : "Perrot", mail : "thomasperrot@outlook.fr"},
    {firstName : "Maxime", lastName : "Le Feuvre", mail : "maximelefeuvre@outlook.fr"},
    {firstName : "Mewen", lastName : "Le Pogam", mail : "mewenlepogam@outlook.fr"},
    {firstName : "Aziliz", lastName : "Abollivier", mail : "azilizabollivier@outlook.fr"},
    {firstName : "Thibault", lastName : "Herledan", mail : "thibaultherledan@outlook.fr"},
    {firstName : "Sophie", lastName : "Puybareau", mail : "sophiepuybareau@outlook.fr"},
    {firstName : "Kévin", lastName : "Le Manach", mail : "kevinlemanach@outlook.fr"}
  ];
  page = 0;
  maximumPages = 3;

  constructor(public navCtrl: NavController) {
    this.loadUsers();
  }

  loadUsers(infiniteScroll?) {
    if (infiniteScroll) {
      infiniteScroll.complete();
    }
  }

  loadMore(infiniteScroll) {
    this.page++;
    this.loadUsers(infiniteScroll);
 
    if (this.page === this.maximumPages) {
      infiniteScroll.enable(false);
    }
  }
}

And all what I get is this :

App
App.PNG1920×895 22.3 KB

Any idea about how to solve this?
Thanks by advance

#2

You should put the code of administrateur.html here to give more context. In any case, make sure to assign a height to the elements, and you could first make a demo list with divs or spans, with the text inside, to make sure the problem is not because some more complex element (like an ion-item) is not rendering the text.

#3

Here is the code inside of my ion-grid element :

<ion-row>
      <ion-card *ngFor="let user of users">
        <ion-item>
          <ion-avatar item-start>
          </ion-avatar>
          <h2 text-capitalize>{{ users.firstName }} {{ users.lastName }}</h2>
        </ion-item>
        <ion-card-content>
          {{ users.mail }}
        </ion-card-content>
      </ion-card>
     
      <ion-infinite-scroll (ionInfinite)="loadMore($event)">
        <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading Users..."></ion-infinite-scroll-content>
      </ion-infinite-scroll>
    </ion-row>
#4

Okay, I’ve changed a little bit my code in administrateur.html
Just to be sure that I could read my datas, I changed “{{ users.firstName }}” into "{{ users[0].firstName }} in order to access to the first data in my database. It’s working and it shows perfectly what I was expecting, but the card is generated as many times as I have datas registered (8 for now)

App_v2
App_v2.PNG1920×962 48.6 KB

So it seems that it’s not about a problem with an actual element I would use, but about the way I’m accessing to my datas. How can I transform my syntax “users[0].firstName” into something that call each datas 1 by 1?

#5

I found my problem : since I’m using “*ngFor” function, I needed to write {{user.firstName}} instead of {{users.firstName}} etc.
Problem solved!