Since the Beta 4, my views don't update

Hello here,

I didn’t have change anything in my code.

I updated my “ionic2” project to the beta 4 by following this post and now my views don’t update.

I have to click somewhere else to update my view.

Is there something new that I have to add to my code ?

Well, u need to check this post about new beta 4:

:slight_smile:

I have checked it but I don’t understand the link with my problem can you explain me please ?

I noticed this problem this morning as well. Here are two descriptions of problems that I feel are the same issue.

  1. Loading a list of items is empty. When I click on the menu toggle, my data suddenly appears on the view.

  2. When I call nav.push(NewPage) the call is fired, and doesn’t error, but no page transition occurs. If I click the button that causes the transition again, it will load the new view, but it has stacked the view twice now in my nav history.

In the case of the second instance I have verified that the call to nav.push() never returns a result from the promise on that first click.

Perhaps something in the way I upgraded the project to beta 4 is causing issues with promises that are supposed to cause view updates?

cli: beta 24
ionic-angular: beta4

used pinned tutorial to update from beta3 to beta4

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: