我正在查看 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" }
];
关于我可能在哪里搞砸了的任何建议?
最佳答案
模板第二部分的问题是 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;
}
关于typescript - Angular 2 : Unable to retrieve list from array in Tour of Heroes tutorial,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35323917/