Problem with infinite-scroll

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';

  selector: 'page-administrateur',
  templateUrl: 'administrateur.html'
export class Administrateur {
  infiniteScroll: InfiniteScroll;
  users = [
    {firstName : "Julie", lastName : "Aubret", mail : ""},
    {firstName : "Thomas", lastName : "Perrot", mail : ""},
    {firstName : "Maxime", lastName : "Le Feuvre", mail : ""},
    {firstName : "Mewen", lastName : "Le Pogam", mail : ""},
    {firstName : "Aziliz", lastName : "Abollivier", mail : ""},
    {firstName : "Thibault", lastName : "Herledan", mail : ""},
    {firstName : "Sophie", lastName : "Puybareau", mail : ""},
    {firstName : "Kévin", lastName : "Le Manach", mail : ""}
  page = 0;
  maximumPages = 3;

  constructor(public navCtrl: NavController) {

  loadUsers(infiniteScroll?) {
    if (infiniteScroll) {

  loadMore(infiniteScroll) {;
    if ( === this.maximumPages) {

And all what I get is this :

Any idea about how to solve this?
Thanks by advance

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.

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

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

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)

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?

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