Dynamic binding slow!


#1

Hello can anyone tell me how to fast dyamic bibding in ionic 2,
If i am doing statically by adding ion list and ion items, even if I add 400 items it is fast.
But when I bind from json file and put json data in array and iterate ion list over that loop. It shows items after some time like 4 seconds. How to fast it as static items? Any solution? Quick one…


#2

Perhaps you can provide a code sample of what you are currently doing?


#3
   <ion-list *ngFor="let item of data">
      <ion-item no-lines id="English{{item.Time}}" [hidden]="!settingsData.showEnglish" [ngStyle]="{'font-size': settingsData.fontSize+'px','color':settingsData.fontColor}">
                {{item.EnglishItem}
            </ion-item>
        
        </ion-list>

in .ts file add json file to an array
this.data = data.json();

Items are more than 500 of lines. I thinlk that’s why it is slow!


#4

Don’t know if it will change that much, but the ngFor should be placed on the item, not on the ion-list. Unless you want to generate a list and item for all items in the array you are looping over.


#5

No this will not work, I have to iterate on ion-list. Item contents are different.


#6

Uhm. The item variable should be available on the ion-item when doing:

<ion-item *ngFor="let item of data" [id]="'English' + item.Time">{{item.EnglishItem}}</ion-item>

unless I misunderstand your intent.

Also, I guess you have factored in the time it takes to fetch these items from the server?


#7

No It is local json file.


#8

Sorry, my bad. Sound very weird. So the file load itself is fast? Have you tried removing all but the {{item.EnglishItem}} inside the ion-item? Just to see if the ngStyle influences anything.


#9

Let me check it bro :slight_smile:


#10

Also what browser is this in?

I see this issue is still open: https://github.com/angular/angular/issues/8112

Have you also tried enabling prodMode for angular and check if it makes a difference?