Angular2 cannot access this in promise callback

Question

This is really strange, but here is my snippet within a service:

constructor() {
    gapi.load('client:auth2', this.loadGoogleApi);
}


private loadGoogleApi() {

    // Array of API discovery doc URLs for APIs used by the quickstart
    var DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest"];

    // Authorization scopes required by the API; multiple scopes can be
    // included, separated by spaces.
    var SCOPES = "https://www.googleapis.com/auth/calendar.readonly";

    //init google api 
    gapi.client.init({
        apiKey: API_KEY,
        clientId: CLIENT_ID,
        discoveryDocs: DISCOVERY_DOCS,
        scope: SCOPES
    }).then(() => {
        // Listen for sign-in state changes.
        gapi.auth2.getAuthInstance().isSignedIn.listen(status => this.updateGoogleSigninStatus(status));
        // Handle initial sign in state
        this.updateGoogleSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get())
    });
}

This code is called when the service is constructed. believe it or not, the status => this.updateGoogleSigninStatus(status) works, but I get an error on the next line, where it cannot seem to see the function. Bazaar scoping problem.

Cannot read property 'updateGoogleSigninStatus' of undefined

If I move that line out of the promise, it works.

@estus I've seen `that` before but thought I was following all the rules. In this case using the flat arrow like so. I'll read through again but I think it's a bug elsewhere — Worthy7, Apr 20 '18 at 00:03
No, you wasn't. loadGoogleApi is passed as callback. `this` is lost inside of it. End of story. You can fix it by following solutions suggested in dupe quesiton. — Estus Flask, Apr 20 '18 at 00:37
@estus Ah, I think you might be right. Would you like to post a proper answer? Thanks so much — Worthy7, Apr 20 '18 at 00:41

score 1 · Accepted Answer · answered Apr 20 '18 at 00:47

loadGoogleApi is passed as callback and should be treated accordingly in order to maintain proper this.

It's either:

constructor() {
    this.loadGoogleApi = this.loadGoogleApi.bind(this);
    gapi.load('client:auth2', this.loadGoogleApi);
}


private loadGoogleApi() { ... }

Or:

constructor() {
    gapi.load('client:auth2', this.loadGoogleApi);
}

private loadGoogleApi = () => { ... }

The former is generally preferable for the reasons explained in this answer.

Angular2 cannot access this in promise callback

1 Answers1