Angular 2 with TypeScript: View not updating after setting variable in response handler

Question

I ran into an issue with Angular 2 using TypeScript that I could use an extra set of eyes on. I am requesting a token from an API which works great. In my response handler I am checking for basic errors and displaying them to the end users. If I log out the error and my message from the console it displays correctly but the view/template does not update.

In my class I have the following:

public message: string;

In my constructor I have:

constructor() {
    this.message = 'Message to enduser';
}

My two methods are the following:

myRequest() {
    (<any>window).privateAPI.getToken({
        token: this.tmpData.token
    }, this.responseHandler);
    return false;
}

responseHandler(response: any) {
    setTimeout(function() {
        if (response.error) {
            // this.message update is not updating in the template
            this.message = response.error.message;
            console.log('error: ', this.message);
        } else {
            // success
        }
    }, 100);
}

Any assistance would be greatly appreciated.

Galactic Ranger · Accepted Answer · 2016-08-28 00:24:04Z

1

I was able to solve this issue by utilizing ngZone. The following resolves my problem with my component not updating my template in the API response.

// import NgZone
import {Component, NgZone} from '@angular/core';

// pass NgZone to constructor
constructor(private _zone: NgZone) {
    this.message = 'Message to enduser';
}


requestToken() {
    (<any>window).privateAPI.getToken({
    token: this.tmpData.token
    }, (status: number, response: any) => {
        this._zone.run(() => {
            if (response.error) {
                this.message = response.error.message;
            } else {
              // good to go
            }
        });
    });
}

answered Aug 28, 2016 at 0:24

Galactic Ranger

8923 gold badges15 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kaj · Accepted Answer · 2016-08-27 22:39:23Z

0

This is because you created a new context within setTimeout. The keyword function does this automatically. In TypeScript you can use lambdas (under Lambdas and using this), also called arrow-functions. When using a lambda, it will automatically capture the this available when the function is created rather than when it is invoked.

Try this:

setTimeout(() => {
    if (response.error) {
        // this.message update is not updating in the template
        this.message = response.error.message;
        console.log('error: ', this.message);
    } else {
        // success
    }
}, 100);

edited Aug 27, 2016 at 22:39

answered Aug 27, 2016 at 22:32

Kaj

3332 silver badges8 bronze badges

6 Comments

Galactic Ranger Over a year ago

That was my initial thought (Hoisting) but when I tried that this.message resulted in undefined Cannot set property 'message' of undefined

Kaj Over a year ago

You mean to say this is undefined there? I don't know with which context responseHandler has been called from the privateAPI callback...

Galactic Ranger Over a year ago

Yes this in the setTimeout(() => { in the if condition

Galactic Ranger Over a year ago

Thanks Kaj looks like the issue is in the privateAPI callback

Shlomi Assaf Over a year ago

use this.responseHandler.bind(this) to make sure the context is right.

|

Collectives™ on Stack Overflow

Angular 2 with TypeScript: View not updating after setting variable in response handler

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related