Typescript/Angular 2 issue

Question

I'm a newbie and not even sure if my issue is a Typescript or Angular2 misunderstanding...

I have the following code (reduced to the minimum):

import {OnInit, Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';

@Component({
    selector: 'hello-app',
    template: `
        <h1>Foo:{{foo}}</h1>
    `
})
export class HelloApp implements OnInit {
    foo:  string;

    ngOnInit() {
      this.loadFoo();
    }

    loadFoo()
    {
      this.loadInput(function(input: string) {
        this.foo = input;
      })
    }

    loadInput (callback) {
        callback ("bar");
    }
}

bootstrap(HelloApp);

Once transcripted and ran in my browser I get the following error message in the browser debugger:

angular2.min.js:17 TypeError: Cannot set property 'foo' of undefined
    at hello.js:34
    at HelloApp.loadInput (hello.js:38)
    at HelloApp.loadFoo (hello.js:31)
    at HelloApp.ngOnInit (hello.js:28)
    at e.ChangeDetector_HostHelloApp_0.detectChangesInRecordsInternal (viewFactory_HostHelloApp:21)
    at e.detectChangesInRecords (angular2.min.js:6)
    at e.runDetectChanges (angular2.min.js:6)
    at e.detectChanges (angular2.min.js:6)
    at t.detectChanges (angular2.min.js:4)
    at angular2.min.js:9

Anyone know why "this" is undefined here and what's my option to set up what goes in {{foo}} using the callback method ?

Thanks !

Thierry Templier · Accepted Answer · 2016-03-18 16:50:05Z

1

You need to use an arrow function so you will be able to use the lexical this keyword:

this.loadInput((input: string) => {
    this.foo = input;
  });

See this link for more hints about the lexical this of arrow functions:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions.

edited Mar 18, 2016 at 16:50

answered Mar 18, 2016 at 16:40

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

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

3 Comments

phil Over a year ago

Awesome, I'm not sure to understand why, but that works ! Thanks !

micronyks Over a year ago

To understand it you must learn arrow function

Thierry Templier Over a year ago

You're welcome! I added a link about how arrow functions work... The this keyword isn't managed the same way than callback functions.

Collectives™ on Stack Overflow

Typescript/Angular 2 issue

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related