角2 - コンソールのGETの結果を表示

Question

私は英雄のチュートリアルを改訂しています。 HeroesComponent.tsで

はコード

export class HeroesComponent implements OnInit { 

heroes: Hero[]; 
selectedHero: Hero; 

    constructor(private router: Router, private heroService: HeroService) { } 

getHeroes(): void { 
    this.heroService.getHeroes().then(heroes => this.heroes = heroes); 
    } 

    ngOnInit(): void { 
    this.getHeroes(); 
    } 

onSelect(hero: Hero): void { 
    this.selectedHero = hero; 
} 

のこのスニペットであり、これは動作します - 英雄の名前は、対応するHTMLに表示されます。

しかし、getHeroes（）私は、コンソールの文

getHeroes(): void { 
    this.heroService.getHeroes().then(heroes => this.heroes = heroes); 
    console.log("heroes list is " + this.heroes) 
    } 

を追加した場合、次に、ブラウザのコンソールショー「英雄のリストが定義されていない」、まだ英雄の配列をHTMLで表示されているインチ

なぜヒーローは未定義ですか？

Answer 1

コンソールが同期でgetが非同期であるため、配列は定義されていません