Ion-list is not supported on ios devices in Ionic 4

Ionic Framework Ionic Angular
1

Hi. I am testing my app in an ios device, specifically in iPhone 7. I also tested in in iPhone 10.

Although I can see my list in an Android device, I cannot see it on ios.

My list in the component:

<ion-list *ngFor="let day of newArray; let i = index;" lines="none">
    <ion-item tappable class="tempAv" (click)="toggleSelection(i)">
      <div>
        <ion-img
          [src]='imageUrl + weatherForecast[day][0].icon + ".png"'
        ></ion-img>
      </div>
      <div class="dayList">
        {{ day }}
      </div>
      <div class="minTemp">
        {{ weatherForecast[day][0].minTemp }}°
      </div>
      <div class="maxTemp">
        {{ weatherForecast[day][0].maxTemp }}°
      </div>
    </ion-item>

    <div *ngIf="weatherForecast[day] && day.open">
      <ion-grid>
        <ion-row nowrap>
          <ion-col
            class="colList"
            *ngFor="let weather of weatherForecast[day]; let j = index;"
          >
            <div>
              <div class="itemList">
                {{ weather.date | date:'h:mm a'}}
              </div>
              <div>
                <ion-img
                  class="iconItemList"
                  [src]='imageUrl + weather.icon + ".png"'
                ></ion-img>
              </div>
              <div class="itemList">
                {{ weather.temperature }}°
              </div>
            </div>
          </ion-col>
        </ion-row>
      </ion-grid>
    </div>
  </ion-list>
2

Please share more information to reproduce it…
For me the content of you component you posted looks correct on the first look.
There is no reason for me why this should not work also on ios-platform.

Do you have eventually a problem on your ios-device-simulator?

Is really the ios-list component the problem or causes another thing the problem?

Does the problem with your ios-component appear everywhere in your application or only on one page?

You see…I have a lot of questions :wink:

So please share more details…

3

Hi! Thanks for the reply! The other items it the component are shown perfectly. Also other components that have other ui components work. The ion-list is not showing. The only thing that prints is only one list but empty. As you can see in my code, I have an iteration where I show in each list the day property.
It does now work on ios emulator. only in android and in browser.

4

Try to cut things out, which might cause a problem to get closer to the problem
Maybe the ion-list is not the real problem…

For example…
Comment everything out within your ion-list and insert on hardcoded ion-item.
Check it again on you device to find out whether you code within the ion-list makes trouble or something else.

5

I just did it.

 <ion-list *ngFor="let day of newArray">
    <ion-item>
      <div>
        {{my_days}}
      </div>
    </ion-item>
  </ion-list>

The problem is with *ngFor.(only in ios) I have other *ngFor and are working perfectly.

I tried now with another array inside ngFor and it does now work although it works in the other component on ios device. On ios device ion-list with ngFor have some issue together.?

6

I think of programming as partly a bunch of contract negotiations, and the contract of ngFor is “thou shalt always feed me something iterable” (and that means you have to initialize newArray - not a great name, btw - at construction time). Similarly, if you’re going to write template expressions like weatherForecast[day][0].minTemp, you are implicitly promising that at all times (i.e. not just after some remote API call has resolved or some random lifecycle event has fired), weatherForecast is always an array, as is whatever weatherForecast[day] is, and it must have at least one member, which is an object. So be very defensive in how you initialize every property in your controller that is referenced by the template.

7

Okay. Sorry for the naming. As for the other things, I will always display smt as in the ngOnInit() of the component I am subscribing to the appropriate methods that I need to get the values and to show then in the component view.

I am having exactly this array:

array = [“Thursday”, “Friday”, “Saturday”, “Sunday”, “Monday”, “Tuesday”];

And the *ngFor on ios does not print this array. What is the problem?

8

This is precisely what I was warning about when saying:

You must initialize everything being referenced by the template at construction time. That means in the constructor, or, if possible, a much better option for readability IMHO is to do it at declaration time:

foos: Foo[] = [];

Not in ngOnInit. Not in ionViewWillEnter. Definitely not in a subscription to an Observable made in either of those that will resolve in the future.

9

Okay. I also did as you said. Only the subscriptions are done in the ngOnInit andin ionViewWillEnter. Not the initialization.
And I cannot make any sense since it is working on Android devices and in browsers.
At the declaration time:

my_days: string[]=[]

10

Please attach a debugger to the device and look in the JavaScript console. There is likely more information there.

11

The problem was in date format of the api. It has nothing to do with ionic. Just that ios platforms cannot transform dates type of string in ISO format to Date object.
I am sorry for my fault. Thanks so much for the help.

2 Likes