Angular 2 then promise
<p>I am doing the Angular 2 tutorial with the Hero App. I am at the Http part of the tutorial. (<a href="https://angular.io/docs/ts/latest/tutorial/toh-pt6.html" rel="nofollow">link</a>)</p>

<p>There is a call to the server with the following method in hero.service.ts</p>

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

<p>And then I'm trying to use the returned data in heroes.components.ts below but I'm not able to implement the then function correctly. I am getting this console error</p>

<blockquote>
  <p>EXCEPTION: Error: Uncaught (in promise): TypeError: this is null</p>
</blockquote>

<pre><code>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();
}
</code></pre>

<p>Do you know why I can't console.log <em>this.heroes</em> and <em>title</em> ?</p>