Ngfor not working

Ionic Framework ionic-v3
1

My page looks like this:

<ion-item *ngFor="#item of items; #i=index" >
 <h2>{{ item }}</h2>
</ion-item>

My ts page looks like this:

let t=setInterval(function() {
           console.log('looping...');
            this.items  = ["a1", "a2", "a3", "a4", "a5", "a6", "a7", "a8", "a9"];
        },1000);

The javascript is looping as it is printing in the console, but my list is not being populated. If I take out the interval and just have:

this.items  = ["a1", "a2", "a3", "a4", "a5", "a6", "a7", "a8", "a9"];

it displays properly then. So it is a problem with the interval it looks like. I am not sure what the problem is?

PS. I know my code looks like it is not doing anything as the same items are being set, but my code is actually longer and has much more business logic, but this interval concept is not working for me and I am trying to find out why.

2

I’m going to guess that setInterval is not playing nicely with zone.js, so you’re going to have to wrap that call inside zone.run() or something.

3

Sorry I am not sure what that is? I tried to wrap it but zone is undefined. May you please show me what you mean?

4

NgZone… But I don’t think, that it is well way. I don’t understand why your code doesn’t work. Maybe it is Ionic team issue. In native html it works fine.

Maybe best way to use ChangeDetectorRef or create EventEmitter

5

ChangeDetectorRef did it! Thanks! It is still quite buggy. For instance if I run this inside platform.ready().then(() => it does not work. As well if I I go let t = setInterval(() => { and instead just setInterval(() => { will work.

1 Like
6

Why are you using setInterval in the first place? If the answer is “because I thought it would be easier to describe in a forum post than the actual situation, which delivers data periodically in a different way”, then even if we can solve this toy problem, it’s not likely to translate into a very good approach to your actual problem. If setInterval is essential to your design, look at ChangeDetectorRef’s markForCheck example.