Also note the user of NgZone here. This is a weird one, but since we are initially setting our items array to blank, and then (slightly) later setting it to whatever is in storage, our list won’t update. It’s already set and the Angular UI does not know that it needs to be updated. By running our load code inside of zone.run we are letting Angular know that the UI needs to be updated. If you do not do this, your list data won’t show up until you click or interact with the UI in some way.
Thank you I got more info.
But before the beta 4 I had not this weird one … I didn’t use NgZone and all worked fine.
I updated, my project, to the beta 4 without any changes and now Angular don’t know that the UI needs to be updated.
And not my project only, I tried with a tutorial project of Ionic2 and I got the same issue.
I had the same issue, using NgZone is what fixed it. I don’t know why it wasn’t needed before and why it is now, or if there is a better way to go about it, or if this is just a bug, but using NgZone will solve the problem.
Josh, could you confirm if this is expected behaviour? As in Angular2, I understood that any change to a models value would update immediately in the view, whenever that may happen at runtime.
@iborik I just tried with a new Ionic 2 project - ionic start Test blank --v2 --ts - and updated it with the code from the plunker test environment and everything works as expected. Maybe it’s something with the configuration or with the build process, as @marcmeans suggested. Do you test in the browser or emulator/device and do you get any errors in the console?
@iignatov the plunker test environment is not a good example because each call updates the previous one or something like that. I tried it without any change and everything was good.
But if you test each call one by one by commenting others you wont get the view updated.
That’s my problem, I need to do an other action to get my view updated and with the plunker test that’s a little bit like that because you do several actions and I think it updates the view at one moment.
@iborik Ok, thanks for the clarification. I created a new test environment which allows to run only a single test at a time. I retried all the tests and they are all working as expected. When I try the same thing with my test project locally then the platform test (i.e. platform.ready().then()) is not working. Do you experience the same, i.e. does only the platform test fail or all of them?
@nanexcool Yes, the plunker is using TS. In JS this is not a valid syntax. If you for whatever reason want to use types and class properties in JS code you can use the workaround from this post:
I tested again one at a time and only the DB test fails now .
I have to precise that the DB test fails only when I use SqlStorage, with LocalStorage it works fine.
@iignatov sorry I make you confuse maybe but thank you to follow that with me.
These issues all sound like the symptoms of zones not working correctly and not triggering change detection. For people having problems updating I would say to make sure that you are including the angular2-polyfills.js script in your index.html, which includes zone.js.
I had the same problem. I started a new project and I made sure to have the angular2-polyfills.js in my index file. The only solution I found was to use import {NgZone} and then do the update of the array with the data from LocalStorage inside the this.zone.run…
Is this a known bug? It started happening after I updated to beta.4.
Also, in my project this is only happening with LocalStorage. I have other views that connect to a REST API and they update correctly once the data is in the array.
Therefore I would say that this behavior was really caused by a bug and that NgZone is just a workaround that is not needed anymore because the issue should be fixed by the following commits in beta.6: