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

Ionic Framework ionic-v3
1

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 : http://pointdeveloper.com/creating-ionic-2-list/ ) 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

System:

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?

Thanks!

Keith

2

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

3

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 : http://pointdeveloper.com/creating-ionic-2-list/

Keith

4

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

5

Here is the .ts:

import { Component } from '@angular/core';
import {Http} from '@angular/http';
import { NavController } from 'ionic-angular';
import 'rxjs/add/operator/toPromise';
@Component({
  selector: 'page-events',
  templateUrl: 'events.html'
})
export class EventsPage {
public items:any;
  constructor(public navCtrl: NavController,public http: Http) {
      this.http = http;
        this.http.get("http://api.randomuser.me/?results=10")
            .subscribe(data =>{
              //console.log(data['_body']);
             this.items=JSON.parse(data['_body']).results;//Bind data to items object
            },error=>{
                console.log(error);// Error getting the data
            } );
  }
 buttonClick(event){
   console.log("button clicked");
   console.log(event);
  }
 
  itemClicked(event,itemData){
    console.log("item clicked");
    console.log(event);
    console.log(itemData);
  }
}
6 
<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>
 
<ion-content padding>
<ion-list>
    <ion-item *ngFor="let item of items" (click)="itemClicked($event,item)">
      <ion-avatar item-left>
        <img src="{{item.picture.thumbnail}}">
      </ion-avatar>
 
      <h2>{{item.name.first | uppercase }}</h2>
      <h3>{{item.gender}}</h3>
 
      <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>
 
    </ion-item>
 
  </ion-list>
</ion-content>
7

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

34 AM
Screen Shot 2017-12-28 at 2.59.34 AM.png999×762 84 KB

8

Anything look out of the ordinary, MattE?

9

Change from http to https, that worked for me

10

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…

Keith

11

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…

Keith

12

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.

Keith

13 
<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