Can't get ion-list to bind in iOS [Success, Finally.... Sort of]

Ionic newb, here…

I’ve been banging my head on this issue for 2 weeks. I CANNOT get an ion-list to bind in iOS - no matter what I try. I have no problem through the browser, or even an Android build.

I even tried third party examples, (such as : ) with similar results. Works in the browser, and Android - by NOT iOS.

Here is my environment info:

cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 7.1.0 

local packages:

@ionic/app-scripts : 3.1.5
Cordova Platforms  : android 6.3.0 ios 4.5.4
Ionic Framework    : ionic-angular 3.9.2


ios-deploy : 1.9.2 
Node       : v8.9.3
npm        : 5.5.1 
OS         : macOS Sierra
Xcode      : Xcode 9.2 Build version 9C40b 

Are there specific tools and/or processes that I can use to debug why the list is not binding on iOS?



Can you show us your HTML + the value of the variable you are trying to bind?

Thanks, Matt. The result I am getting with my code is the same as with what I am getting with the code from the linked tutorial :


No, just show us the code.
You might have missed something from the docs/tutorials

Here is the .ts:

import { Component } from '@angular/core';
import {Http} from '@angular/http';
import { NavController } from 'ionic-angular';
import 'rxjs/add/operator/toPromise';
  selector: 'page-events',
  templateUrl: 'events.html'
export class EventsPage {
public items:any;
  constructor(public navCtrl: NavController,public http: Http) {
      this.http = http;
            .subscribe(data =>{
             this.items=JSON.parse(data['_body']).results;//Bind data to items object
                console.log(error);// Error getting the data
            } );
   console.log("button clicked");
    console.log("item clicked");
      Ionic Blank
<ion-content padding>
    <ion-item *ngFor="let item of items" (click)="itemClicked($event,item)">
      <ion-avatar item-left>
        <img src="{{item.picture.thumbnail}}">
      <h2>{{ | uppercase }}</h2>
      <ion-icon *ngIf="item.gender=='female'" name="woman" item-left></ion-icon>
      <ion-icon *ngIf="item.gender=='male'" name="man" item-left></ion-icon>
      <ion-icon name="heart" item-right></ion-icon>
      <button ion-button item-right color="danger" (click)="buttonClick($event)">Button</button>

I attached the safari debugger to the app, running on my phone. This is all I got…

Anything look out of the ordinary, MattE?

Change from http to https, that worked for me

OMG. That was a saga. Freakin’ Apple. I think now I recall something iOS requiring HTTPS for WebAPI calls.

Thank you so much, Matt! My hope has now been restored…


A little bit more of a saga. After finally getting the tutorials to work on a device - I went back and tried to modify the angular code to call my stuff… Easily another 10 hours spent trying this and that - eliminating differences. I got it down to the point where the only difference was that I was calling my endpoint, vs. the tutorials. I was testing against existing API, so obviously the schema was different. I noticed that my date formats were slightly different… could that be it, I asked?

So I retooled that in another test service, and removed the dates. I was only returning two strings - first and last name. Worked great in the browser, and in the Android simulator. Could not get it to work on the iOS simulator or the physical device…

FInally, I said… OK. Let me try allowing CORS on the server. BOOM. That was it.

So, am I to understand that (even though the communication is from the App (on the device) right to the server (no proxies, etc)) - that I STILL must allow CORS on my server? Somehow, there is still some inner dependency on localhost - even fully installed on the device?

Is that safe / advisable / true? Will Ionic apps NOT work unless the server allows CORS? Seems like a big, potential deal breaker…


I mean, I understand that allowing CORS in development is easy and fast. But I’m not sure that I want to expose my API to potential security risks.

Does the “–prod” flag during compilation remove the necessity for CORS from native iOS to a WebAPI server? I haven’t tried that flag, yet. But I am ONLY able to bind to WebAPI data in iOS if I allow CORS on my server.

Any insight is greatly appreciated.


<ion-icon *ngIf="item.gender=='female'" name="woman" item-left></ion-icon>
      <ion-icon *ngIf="item.gender=='male'" name="man" item-left></ion-icon>

i needed this…thanks