angular 2: when resolving promise in component via service 'this' is 'window' -
i'm following quickstart tutorial angular 2 (https://angular.io/docs/ts/latest/tutorial/toh-pt4.html#!#review-the-app-structure) , got stuck in services chapter. component:
@component({ selector: 'main', templateurl: 'main/main.template.html', styleurls: ['main/main.component.css'], providers: [heroservice], directives: [herocomponent] }) export class maincomponent implements oninit { title: string = 'tour of heroes'; heroes: hero[]; selectedhero: hero; constructor(private _heroservice: heroservice) { } getheroes() { this._heroservice.getheroes().then(heroes => this.heroes = heroes ); } ngoninit() { this.getheroes(); } onselect(hero: hero) { this.selectedhero = hero; } } as can see implements oninit, executes component's getheroes method, in turns calls injected heroservice:
import { injectable } 'angular2/core'; import { heroes } '../hero/hero.mock'; @injectable() export class heroservice { public getheroes() { return promise.resolve(heroes); } } the promise resolves , array hero.mock.ts in response variable:
getheroes() { this._heroservice.getheroes().then(heroes => // heroes = array[10] this.heroes = heroes ); } the problem i'm facing first this (this._heroservice) correctly set maincomponent, second 1 (this.heroes) referencing window javascript object. i've checked several other answers, including this , done suggest, problem remains. can think of reason why happening?
edit: generated javascript maincomponent#getheroes
maincomponent.prototype.getheroes = function () { var _this = this; this._heroservice.getheroes().then(function (heroes) { return _this.heroes = heroes; }); }; maincomponent.prototype.ngoninit = function () { this.getheroes(); }; another edit: if change method calling service (note curly brackets wrapping after =>) this is maincomponent, neither changes in title nor in heroes array reflected in view:
getheroes() { this._heroservice.getheroes().then(heroes => { console.log(this); this.title = 'modified string'; this.heroes = heroes; }); }
Comments
Post a Comment