View not updating after API call following login

Ionic Framework ionic-v3
1

Hey folks,

I’ve started experimenting with ionic2. I built a simple app, with navigation between pages, several layouts, menu etc. I hooked everything up and used the http module to get data for the views from an API.
I then added a login page as the rootview. After successfully logging in I set my root to my homepage.
The authentication works, so does the app and the API calls. Everything together does not.

I’m using authentication via Facebook. I use the InAppBrowser plugin to achieve this as my API was already set up to do the whole oAuth redirect dance. The API correctly creates a session and sends back a token which I then strip out of the URL and store locally. After that I close the inAppBrowser and set the root page. That page request more data from the API and successfully updates the model, yet the view remain blank.
I tested this without the login page, setting the homepage as root directly and that works, but when I try to use with the login first, it doesn’t update.

Anyone have any ideas on the reason for this?

2

Try using the async pipe or creating an observable for your request.

Chances are, the data is being returned outside of angular zone change detection.

3

I’ll try the async pipe, I was already using observables and it didn’t work. I’ve just done a quick test, I refactored the api call to only request data on clicking a button. This way it works, but if call the api on the constructor or any of the onInit funcs, it doesn’t update the view. So yes, most likely a problem with angular zone.

I’ll try async first thing tomorrow morning. Get back to you then

4

Still no luck with the async pipe, it just doesn’t update the view

5

You can always import a ChangeDetectorRef and force change detection whenever you want (not the preferred way of doing this but it works)

import {ChangeDetectorRef} from '@angular/core';

@Component({
  templateUrl: 'page.html'
})
export class Page{
 constructor(private changeDetectorRef: ChangeDetectorRef) {}
 doAsyc() {
   this.someService.returnsObservable.subscribe(res => {
     this.data = res;
     this.changeDetectorRef.detectChanges();
    }, err => console.error(err));
}