typescript - Angular 2 : Unable to retrieve list from array in Tour of Heroes tutorial

Question

我正在查看 Angular2 的英雄之旅教程，但无法获得数组中定义的英雄列表。虽然 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 对象未定义(因为它与循环中的 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