Angular2：Tour of Heroesチュートリアルの配列からリストを取得できません

Question

私はAngular2からTour of Heroesチュートリアルを探していますが、配列に定義されているヒーローのリストを取得することができません。 ngForはリストされた10のアイテム（リストドットのみ）を表示していますが、コンテンツ（IDと名前）は表示されていません。ここで

私が今まで持っているコードです：

import {Component} from 'angular2/core'; 


interface Hero { 
    id: number; 
    name: string; 
} 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <h1>{{title}}</h1> 
    <h2>My Heroes</h2> 
    <ul> 
     <li *ngFor="#hero of heroes"> 
      <span class="badge">{{hero.id}}</span> {{hero.name}} 
     </li> 

    </ul> 
    <div><label>id: </label> {{hero.id}}</div> 
    <div> 
     <label>name: </label> 
     <input [(ngModel)]="hero.name" placeholder="name"/> 
    </div> 
    ` 
}) 


export class AppComponent { 
    public title = 'Tour of Heroes'; 
    public heroes = HEROES; 
    public selectedHero: Hero; 
} 

var HEROES: Hero[] = [ 
    { "id": 11, "name": "Arrow" }, 
    { "id": 12, "name": "Flash" }, 
    { "id": 13, "name": "Chuck Norris" }, 
    { "id": 14, "name": "Hulk" }, 
    { "id": 15, "name": "Superman" }, 
    { "id": 16, "name": "Captain Canada" }, 
    { "id": 17, "name": "Iron Man" }, 
    { "id": 18, "name": "Ant Man" }, 
    { "id": 19, "name": "Silver Surfer" }, 
    { "id": 20, "name": "Batman" } 
]; 

任意の提案は、私はそれを台無しにしているかもしれないどこにとして？

Answer 1

heroオブジェクトが定義されていないテンプレートの2番目の部分に問題があります（これはループ内に同じheroではないためです）。あなたはこのようにそれを修正することができます：

@Component({ 
    selector: 'my-app', 
    providers: [], 
    template: ` 
    <ul> 
     <li *ngFor="#hero of heroes" (click)="selectedHero = hero"> 
      <span class="badge">{{hero.id}}</span> {{hero.name}} 
     </li> 
    </ul> 
    <div *ngIf="selectedHero"> 
     <div><label>id:</label> {{selectedHero.id}}</div> 
     <div> 
      <label>name: </label> 
      <input [(ngModel)]="selectedHero.name" placeholder="name"/> 
     </div> 
    </div> 
    `, 
    directives: [] 
}) 
export class App { 
    public heroes = HEROES; 
    public selectedHero: Hero; 
} 

デモ：http://plnkr.co/edit/4xivhl1wYTSsiof8QJu4?p=preview