Angular 我答应你

我正在用Hero应用程序做Angular 2教程。我在教程的Http部分。（）

在hero.service.ts中使用以下方法调用服务器

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

---

你知道为什么我不能控制台。记录这个。英雄和标题吗？

你可能遇到了一些范围问题。。。它正在查找的不是你认为的。试着这样做：

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

}

---

您可能遇到了一些范围界定问题。。。它正在查找的不是你认为的。试着这样做：

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

}

---

这是一个范围问题，在类型脚本中将代码传递给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);
    })

}

一个非常重要的注意事项：

---

不要使用\u这个来保存你的作用域，因为它是一个保留关键字，Typescript使用它来做同样的事情，但它是自动的，不幸的是，它在被评论的情况下不起作用。

这是一个作用域问题，在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);
    })

}

一个非常重要的注意事项：

---

不要使用<强>这个<<强>来保存你的范围，因为它是一个<强>预留的关键字用来做同一件事，但自动地，在评论的情况下不幸地不起作用。

你可能想考虑胖箭头符号来避免<强>范围<强>冲突。在您的情况下，这并不指向类实例，而是指向您承诺的SuccessCallback

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

---

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

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

---

谢谢你的回答。这是一个范围问题

---

您可能需要考虑FAT箭头符号以避免作用域。 冲突。在您的例子中，这并不指向类实例，而是指向类实例 为了你的诺言的成功

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

---

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

谢谢你的回答。这是一个范围问题

---

您可能需要考虑FAT箭头符号以避免作用域。 冲突。在您的例子中，这并不指向类实例，而是指向类实例 为了你的诺言的成功

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

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