View not updated but model does. ngZone issues?

[brozada]

Hi,

I’m working on an app that have to reload data from some services upon resume.
Services are inited and filled in app.ts and then injected on pages. I’ve then added a resume listener that call data services reload on resume event, and it works, as I can see the logs in the server and data is updated.
The problem is that views are not reloaded until I do an action in the page, and then the view reload is so fast that you can see it updated before the transition to another page or show a modal.

I’ve read that this could be related to ngZone issues on old betas, but I don’t know how to debug it.
Could somebody give me some hints?
Thanks

[iignatov]

@brozada

I’ve read that this could be related to ngZone issues on old betas, but I don’t know how to debug it.

In case that you updated your project from an earlier version of the framework I would suggest to check if you performed the update properly. If you missed something by the update, it might result in such problems. Check out the following post for more details:

Ionic2 load ion-toggle or ion-select at will from promise?

I believe that your problem might be caused by the following line in your app.ts: import 'es6-shim'; You need to remove this - check out the guide for updating to beta.6. I would also recommend you to use Node v4/v5 but not v6 because it’s not supported yet:

[brozada]

I’d checked that thread and verified es6-shim or node version. I even migrate app to a new folder,
and did a diff compare with conference app to look for possible problems, bit it didnt help.

[iignatov]

@brozada

I’d checked that thread and verified es6-shim or node version.

Could you provide some code or try to reproduce the problem using the following plunker as template?

[brozada]

Solved with beta.9 I guess.
My issue is that I’ve to consume some services to keep the UI updated when app resumes.
I was doing so by a listener on cordova resume. Simplified code bellow:

app.ts:

...
    constructor(data:Data){
        this.platform.ready().then(() => {
        this.data.getData();
        }
    }
    addListener() {
        var me = this;
        var onResume = function () {
          me.data.getData();
        };
        document.addEventListener('resume', onResume, false);
    }
...

It was not working, but the same this.data.getData() call done from a button was working.

I’ve seen in ionic code that with beta.9, resume event runs inside a zone, and probably that did the trick. (IMVHO)

Thanks

[iignatov]

@brozada

I’ve seen in ionic code that with beta.9, resume event runs inside a zone, and probably that did the trick.

Yes, most probably, great that it solves your problem.

[brozada]

I spoke too soon…
It seems that sometimes works, but not always.
If I press overview or home button (sending the app to background), and after a while press overview again and open the app, the values got updated. I can repeat this with no problem.
But it seems that when phone is locked or time interval is greater, If I open the app or resume it from overview buttton, the getDataservice is called and I got logs in the server, but the UI is not updated until I do some action.

[iignatov]

@brozada

But it seems that when phone is locked or time interval is greater, If I open the app or resume it from overview buttton, the getDataservice is called and I got logs in the server, but the UI is not updated until I do some action.

You could check in which zone your code is executed as explained in the linked post:

ngFor Not Updating

@finke The code looks OK. I guess that it might be something zone-related, e.g. like the following zone.js issue: Losing zone in RxJS and fetch. I’ll suggest you to check in which zone your code is being executed: onGetNear() { // ... this._dataService.nearbySearch(req).subscribe(res => { this.places = res; console.log(Zone.current.name); console.log(this.places); }); }

[brozada]

Solved by calling data service through zone

Without this, resume event works fine if phone is not locked, but never worked when app comes from background if phone was locked.

Also I’ve changed the code a bit, just for being more ts (but it didn’t work until I add NgZone run)

  addListener() {
    document.addEventListener('resume', () =>{
          this.onResume();
    });
  }
  onResume(){
    this._zone.run(()=>{
      this.data.getData();
    });
  }

[marcovtwout]

I also used this solution to force a view update on the resume event. See: https://stackoverflow.com/a/41724333/729324