title: error promise unresolbed angular 2
body: <p>i learned from angular 2 doc that ngOnInit method is the place to fetch data from server so that what i do but there is problem :</p>
  
  <p><strong>component</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  import { Champion } from './champion'
  
  import { ChampionService } from './champion.service';
  
  import { ActivatedRoute } from '@angular/router';
  
  @Component({
      selector: 'champion',
      template:    
          `
              &lt;div *ngIf="champion"&gt;
                  &lt;h1&gt; {{ champion.name }} &lt;/h1&gt;
  
                  this is champion descirption
              &lt;/div&gt;
          `,
  
  
  })
  
  export class ChampionComponent implements OnInit {
  
      champion : Champion;
  
      constructor(private championService : ChampionService,
          private activatedRoute : ActivatedRoute) 
      { 
  
      }
  
      ngOnInit() {
          this.activatedRoute.params
          .forEach(params =&gt; {
              let id = +params['id']
  
              this.championService.getChampion(id)
                  .then(champion =&gt; this.champion = champion);
  
          });
    }
  }
  </code></pre>
  
  <p><strong>service</strong></p>
  
  <pre><code>import { Injectable }    from '@angular/core';
  import { Headers, Http } from '@angular/http';
  
  import 'rxjs/add/operator/toPromise';
  
  import { Champion } from './champion'
  
  
  @Injectable()
  export class ChampionService {
  
      private url : string = "https://jsonplaceholder.typicode.com/users";
  
      constructor(private http : Http) {
  
      }
  
      getChampions() : Promise&lt;Champion[]&gt; {
          return this.http.get(this.url)
              .toPromise()
              .then(response =&gt; response.json() as Champion[]);
      }
  
      getChampion(id : number) : Promise&lt;Champion&gt; {
          return this.http.get("https://jsonplaceholder.typicode.com/users/" + id)
              .toPromise()
              .then(response =&gt; {
                  return response.json() as Champion
              })
      }
  }
  </code></pre>
  
  <p>if i remove the <code>div</code> with <code>*ngIf</code> from the template i get a unresolved promise error, that mean that the template is rendered before the promise is resolved, so champion is undifined.</p>
  
  <p>but i found its very disturbing to wrap every componenat that need to fetch data from a server in a <code>div</code> with <code>*ngIf</code>.</p>
  
  <p>i'm doing it wrong??</p>
  
  <p>thanks and sorry for my bad english</p>