Машинопись/Угловое 2 вопрос

Question

Я новичок, и даже не уверен, если мой вопрос является Машинопись или Angular2 недоразумение ...

Я следующий код (сведена к минимуму):

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); 

После Transcripted и побежал в моем браузере я получаю следующее сообщение об ошибке в браузере отладчика:

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 

Кто-нибудь знает, почему «это» не определено здесь, и то, что мой вариант, чтобы установить, что происходит в {{Foo} } с помощью метод обратного вызова?

Спасибо!

Answer 1

Вы должны использовать функцию стрелки, так что вы сможете использовать лексическую this ключевого слова:

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

Смотрите эту ссылку для получения дополнительной подсказки о лексическом это функциях стрелок:

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