Since the Beta 4, my views don't update

I tried something :

I created a project with the following command from the Getting Started :
ionic start MyIonic2Project tutorial --v2 --ts

I added to the tutorial project few lines of code that I use in my main project to see if I will get the same issue :

1 - hello-ionic.html :

<ion-input type="text" [(ngModel)]="t1" style="background-color:lightblue;"></ion-input>
<ion-input type="text" [(ngModel)]="t2" style="background-color:lightgreen;"></ion-input>

2 - hello-ionic.ts :

export class HelloIonicPage {

  private t1: string;
  private t2: string;

  private db: Storage = new Storage(SqlStorage);
  
  constructor() {

    this.db.get('thing').then((thing: string) => {
        this.t1 = "test one";
    });

    this.t2 = "test two";

  }

}

Here is the result :

We don’t see "test one" in the first input.
However, if I put the focus on the first input "test one" will appear.

I got this issue when I have updated my project to the beta 4.

Someone can explain why please ?

(Sorry for my english :blush: )

hello , I’m facing the same problem any solution?

Is this happening only with SqlStorage or also in other cases?

I created a simple test environment based on beta.4 and all view updates that I tried worked as expected.

Is anyone, experiencing such problems, able to reproduce them there?

in my case this happening after I consult a service and do the redirection.

salvarClienteBaseDados(tokenCliente) {
        this.clienteService.salvarCliente(tokenCliente).subscribe(cliente => {
            redirecionarPageTab;
        }, (error) => {
            alert(this.translate.instant("ERRO.PADRAO"));
            console.error(this.translate.instant("ERRO.SERVICO.CLIENTE") + error);
        }
        );
    }

  redirecionarPageTab() {
        console.log('Redirecionar');     
        setTimeout(() => {
            console.log('Redirecionar Executou');  
            this.nav.setRoot(TabsPage);
        }, 1000);
       
    }

clienteService
    salvarCliente(token) {
            //let body = JSON.stringify(user.authResponse.accessToken);
            let body = token;
            let headers = new Headers({ 'Content-Type': 'application/json' });
            let options = new RequestOptions({ headers: headers });
            return this.http.post(favoritesURL + 'cadastro', body, options)
                .map(res => res.json())
                .catch(this.handleError);
        }

I can’t reproduce it using your plunk as a basis. I’m guessing something in the ionic app build process is what is causing the issue.

@iignatov I tried your Plunker and the problem of updating is still there :confused:

Take a look at my use of NgZone in this tutorial: http://www.joshmorony.com/build-a-todo-app-from-scratch-with-ionic-2-video-tutorial/

and see if that helps.

1 Like

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.

2 Likes

Amazing! That fixed my issue.

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?

Any news? Also I believe that the bug is because the application does not know the time to update the client page .

@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?

@iignatov I saw your plunker and I have no idea if this has anything to do with it but…

I’m using JS instead of TS and I declare my variables inside the constructor like so:

constructor(platform) {
  this.title = 'ORIGINAL';
}

not outside which I don’t believe is possible in JS?

@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 :confused:.
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.

A short update: I made some research in the past days about this problem and I found out the following similar issues filed in the Angular 2 repo:

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:

I would suggest you to update your projects to beta.6 instead of using NgZone on every line.

3 Likes