Angular 角度2：通过服务解决组件中的承诺时'；这'；是'；窗口'；

我正在学习Angular 2（）的快速入门教程，我被困在了服务一章中。这是我的组件：

@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; }
}

如您所见，它实现了

OnInit

，它执行组件的

getheros

方法，该方法依次调用注入的

HeroService

：

import { Injectable } from 'angular2/core';
import { HEROES } from '../hero/hero.mock';

@Injectable()
export class HeroService {
  public getHeroes() {
    return Promise.resolve(HEROES);
  }

}

承诺成功解析，我从响应变量中的

hero.mock.ts

获取数组：

getHeroes() {
  this._heroService.getHeroes().then(heroes =>  // heroes = Array[10]
    this.heroes = heroes
  );
}

我面临的问题是第一个

this

（

this.\u heroService

）被正确设置为

main-component

，但第二个（

this.heros

）引用的是

窗口

javascript对象。我已经检查了其他几个答案，包括他们的建议，并按照他们的建议去做，但问题仍然存在。有人能想出发生这种情况的原因吗

编辑：为MainComponent生成的javascript#getHeroes

另一次编辑： 如果我将调用服务的方法更改为this（请注意，在

=>

之后用花括号将所有内容括起来），则

this

是

主组件

，但标题和

英雄

数组中的更改都不会反映在视图中：

getHeroes() {
  this._heroService.getHeroes().then(heroes => {
    console.log(this);
    this.title = 'modified string';
    this.heroes = heroes;
  });
}

---

如何使用教程中提供的Plunker制作一个可复制的Plunker，并对其进行修改，从而演示您的问题？（）你是怎么知道“这”是“窗口”的？

this.\u heroService.getheromes（）。然后（heromes=>this.heromes=heromes）

将导致不同的

此
上下文，因为它不能用箭头来完成。您能为这个TypeScript类提供编译的ES5代码吗？谢谢@estus我刚刚在chrome开发工具中中断了它并检查了内容。@Thierry当然！我下午再做。
getHeroes() {
  this._heroService.getHeroes().then(heroes => {
    console.log(this);
    this.title = 'modified string';
    this.heroes = heroes;
  });
}