ошибка обещание unresolbed углового 2

Question

я узнал от угловых 2 дока, что метод ngOnInit является местом для извлечения данных с сервера, так что то, что я делаю, но есть проблема:

компонент

import { Component, OnInit } from '@angular/core'; 

import { Champion } from './champion' 

import { ChampionService } from './champion.service'; 

import { ActivatedRoute } from '@angular/router'; 

@Component({ 
    selector: 'champion', 
    template:  
     ` 
      <div *ngIf="champion"> 
       <h1> {{ champion.name }} </h1> 

       this is champion descirption 
      </div> 
     `, 


}) 

export class ChampionComponent implements OnInit { 

    champion : Champion; 

    constructor(private championService : ChampionService, 
     private activatedRoute : ActivatedRoute) 
    { 

    } 

    ngOnInit() { 
     this.activatedRoute.params 
     .forEach(params => { 
      let id = +params['id'] 

      this.championService.getChampion(id) 
       .then(champion => this.champion = champion); 

     }); 
    } 
} 

служба

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<Champion[]> { 
     return this.http.get(this.url) 
      .toPromise() 
      .then(response => response.json() as Champion[]); 
    } 

    getChampion(id : number) : Promise<Champion> { 
     return this.http.get("https://jsonplaceholder.typicode.com/users/" + id) 
      .toPromise() 
      .then(response => { 
       return response.json() as Champion 
      }) 
    } 
} 

если я удалить div с *ngIf из шаблона я получаю ошибку неразрешенного обещания, это означает, что шаблон отображается до того, как обетование будет разрешено, поэтому чемпион будет ограничен.

но я обнаружил, что очень сложно обернуть каждый компонент, который должен извлекать данные с сервера в div с *ngIf.

Я делаю это неправильно ???

спасибо и извините за мой плохой английский

Answer 1

Если вы хотите не хотите, чтобы сделать некоторые любые проверки значений в HTML, было бы полезно иметь все данные, которые уже доступны для вас, прежде чем оказать HTML, правильно?

К счастью, Angular2 делает именно это возможным с помощью resolve route guard. Он будет удерживать компонент от загрузки до тех пор, пока не будет выполнено условие, которое может загружать данные. Тогда данные будут доступны для вашего компонента сразу после его загрузки.