Ion-list works in browser but appears blank on device

Ionic Framework ionic-v3
1

I have an ion-list that works just fine when i run ionic serve but when I build for android and run on my phone the list appears (I can see the item separators) but there is no content (or it is not visible) so it seems like the data is there. Any thoughts? Thanks in advance!

<ion-list *ngSwitchCase="'buying'">
            <ion-item *ngFor="let order of orders.buying" (click)="itemSelected(order)">
                <h2>#{{order.id}} - {{order.seller_org_name}}</h2>
                <p><b style="color:#00CC33">{{order.total | currency:'USD':true:'1.2-2'}}</b> [{{order.status}}]</p>
                <ul>
                    <li *ngFor="let order_item of order.order_items">
                        {{order_item.title}}
                    </li>
                </ul>
            </ion-item>
        </ion-list>
2

Try using ionic serve --lab maybe on android/ios (your platform) there is another styling for text color - same like you list background color.

Try remote debugging to inspect your elements --> for android use chrome and for ios use safari debugging.

3

I meet the same issue, after a setTimeout I’m surprised to see no list’s items.
Althought I used AlertController wich displayed correctly the request return : sqlStorage works finely ! But none item of ion-list component !

Tryed with Android :

image
Screenshot_2017-04-21-14-06-54[1].png1280×800 65.6 KB

#home.ts :

loadDataTable()
  {
	this.sData.getData()
	.then( (results)=>{
		console.log("loadDataTable::sData.results = "+JSON.stringify(results) );
		if(results!=0)
		{ // Displaying results on device
			this.BOUtils.showAlert("Debug :", JSON.stringify(results));
			setTimeout( ()=> {
				this.data = results;
				console.log("this.data.length = "+this.data.length);
		   	},3000);
		}
		else
			this.BOUtils.showToast("Aucune donnée !",5000);
	}); // Lire les tuple pour peupler le template
  }

  createDataTable()
  {
  	//this.sData.simpleCreateDate();
  	this.sData.createData();
  }

#data-services.ts

     public getData():Promise<any>
    {
		return this.storage.query("SELECT id, volume, idUsager,'[Utilisateur]' as strUsagerNom, statutPaiement, montantPaiement "+
		  "FROM remplissages ")
		  .then((data) => {
			console.log("data.res.rows.length = "+data.res.rows.length);
			if(data.res.rows.length > 0) {
				let remplissages = [];
				let strVolume:string; 
				let strUsagerComplet:string;
				let strMontantPaiement:string;
				
				for(let i = 0; i < data.res.rows.length; i++) {
		                let strStatutPaiement:string = "Non payé";
  			            if(data.res.rows.item(i).statutPaiement==1)
				             strStatutPaiement = "Payé";
				
   				   remplissages.push({
  		                      id: data.res.rows.item(i).id,
		                      volume: data.res.rows.item(i).volume,
		                      strVolume: data.res.rows.item(i).volume+" " + this.UNITE_VOLUME,
		                      idUsager: data.res.rows.item(i).idUsager,
		                      strUsagerComplet:  data.res.rows.item(i).strUsagerPrenom+" "+ data.res.rows.item(i).strUsagerNom,
		                      statutPaiement: this.BOUtils.getBooleanFromNumber(data.res.rows.item(i).statutPaiement),
		                      strStatutPaiement: strStatutPaiement,
	            	 	      montantPaiement: data.res.rows.item(i).montantPaiement,
	            		      strMontantPaiement: strMontantPaiement,
		            });
                }
                return remplissages;
           	 }
             else{ // if(data.res.rows.length == 0
            	return 0;
             }
        }, (error) => {
            console.log(error);
            this.BOUtils.showToast("getRemplissages : "+JSON.stringify(error), 5000);
		    return error;
        });
	}

#home.html


<ion-content class="has-header">

 <ion-list class="listeGestion">
     <ion-list-header>
          Inventaire des remplissages
     </ion-list-header>
      <ion-item *ngFor="let d of data">
        <ion-avatar item-left class="header-volume-value">
           {{d.strVolume}}
        </ion-avatar>
        <h2>Fait le {{d.dateHeure | date:"EEE dd MMM y"}}</h2> 
        <h3>
          {{d.strUsagerComplet}}
        </h3>
        <p>
          {{d.strStatutPaiement}}
        </p>
      </ion-item>
   </ion-list>

<ion-content>

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.0.0-beta.37
Ionic App Lib Version: 2.0.0-beta.20
OS: Windows 8.1
Node Version: v4.5.0

4

Are you initializing data to an empty array like data = []? If you aren’t, do so. Anything walked by ngFor in the template must be an array at all times.

5

I don’t use data in reality, it’s a forgotten var.

6

Your template seems not to have gotten that memo:

<ion-item *ngFor="let d of data">
7

@rapropos
I extracted a piece of code which is right. You are right : this basic feature works as it must do it !
But I didn’t find my error into complex method on home.ts nor data-services.ts not visible here, it is reserved to be displayed for customers that I works for !
Thanks.