title: Angular 2 then promise
body: <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>