Angular 2 然后承诺答案

【问题标题】：Angular 2 then promiseAngular 2 然后承诺
【发布时间】：2016-07-15 06:56:39
【问题描述】：

我正在使用 Hero 应用程序编写 Angular 2 教程。我在教程的 Http 部分。 (link)

在 hero.service.ts 中有如下方法调用服务端

  getHeroes(): Promise<Hero[]> {
    return this.http.get(this.heroesUrl)
               .toPromise()
               .then(response => response.json().data)
               .catch(this.handleError);
  }

然后我尝试在下面的 heros.components.ts 中使用返回的数据，但我无法正确实现 then 函数。我收到此控制台错误

异常：错误：未捕获（在承诺中）：TypeError：这是 null

export class HeroesComponent implements OnInit {

title = 'Tour of Heroes';
heroes: Hero[];
selectedHero: Hero;

constructor(
    private router: Router,
    private heroService: HeroService) { }

getHeroes() {
    this.heroService.getHeroes().then(function(value) {
        //SUCCESS
        console.log(value);  //this is working
        this.heroes = value; //this is not working
        console.log("I am inside then SUCCESS")
        console.log(title);
        console.log(this.heroes);

    }, function(error) {
        //FAILURE
        console.log(error);
    })

}

ngOnInit() {
    this.getHeroes();
}

你知道为什么我不能 console.log this.heroes 和 title 吗？

【问题讨论】：

标签： angular promise

【解决方案1】：

您可能需要考虑粗箭头符号以避免范围冲突。在您的情况下，this 并不指向类实例，而是指向您的承诺的 sucesscallback。

getHeroes() {
    let instance : HeroesComponent = this;
    this.heroService.getHeroes().then((value) => {
        //SUCCESS
        console.log(value); 
        this.heroes = value; 
        console.log("I am inside then SUCCESS")
        console.log(this.title);
        console.log(this.heroes);

    }, (error) => {
        //FAILURE
        console.log(error);
    })
}

【讨论】：

【解决方案2】：

这是一个范围问题，在 Typescript 中，将代码传递给 jquery 或其他 javascript API 以及在您的情况下使用 lambda 函数时存在很多范围问题。要解决这个问题，您需要将范围保存在变量中：

getHeroes() {
    let instance : HeroesComponent = this;
    this.heroService.getHeroes().then(function(value) {
        //SUCCESS
        console.log(value);  //this is working
        instance.heroes = value; //this now works
        console.log("I am inside then SUCCESS")
        console.log(title);
        console.log(instance.heroes);

    }, function(error) {
        //FAILURE
        console.log(error);
    })

}

非常重要的提示：不要使用 _this 来保存您的范围，因为它是 Typescript 使用的 保留关键字 自动执行相同的操作，不幸的是在注释的情况下不起作用。

【讨论】：

【解决方案3】：

感谢您的所有回答。这是一个范围问题。

您可能需要考虑使用粗箭头表示法来避免作用域冲突。在您的情况下，这并不指向类实例，而是改为你的承诺的成功回调。

我使用了粗箭头符号，它解决了这个问题。

【讨论】：

【解决方案4】：

您可能遇到了一些范围界定问题...它正在查找的 this 不是您认为的 this。尝试这样的事情：

getHeroes() {
    let that = this; // use that now in all sub functions
    this.heroService.getHeroes().then(function(value) {
        //SUCCESS
        console.log(value);  //this is working
        this.heroes = value; //this is not working
        console.log("I am inside then SUCCESS")
        console.log(that.title);
        console.log(that.heroes);

    }, function(error) {
        //FAILURE
        console.log(error);
    })

}

【讨论】：