angularjs2进阶教程2-建立一个主/详细页面的英雄名单

还是 angularjs2入门1-文件结构分析 的源码，将app名称tutorial-step2-masterDetail

1.根据上一节的类，创建英雄数组，这个数组先从模拟数据吧，等后面再介绍怎么从网络服务器获取

const HEROES: Hero[] = [
{ id: 11, name: 'Mr. Nice' },
{ id: 12, name: 'Narco' },
{ id: 13, name: 'Bombasto' },
{ id: 14, name: 'Celeritas' },
{ id: 15, name: 'Magneta' },
{ id: 16, name: 'RubberMan' },
{ id: 17, name: 'Dynama' },
{ id: 18, name: 'Dr IQ' },
{ id: 19, name: 'Magma' },
{ id: 20, name: 'Tornado' }
];

2.在控制器中加入，给heros赋值

title = 'Tour of Heroes';
heroes = HEROES;
selectedHero: Hero;
onSelect(hero: Hero): void {
this.selectedHero = hero;
}

3.在页面显示

<h1>{{title}}</h1>
<h2>My Heroes</h2>
<ul class="heroes">
<li *ngFor="let hero of heroes"
[class.selected]="hero === selectedHero"
(click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
<div *ngIf="selectedHero">
<h2>{{selectedHero.name}} details!</h2>
<div><label>id: </label>{{selectedHero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="selectedHero.name" placeholder="name"/>
</div>
</div>

4.分析代码
*ngFor="let hero of heroes"是循环数组数据；
(click)="onSelect(hero)"是列表的点击事件，代码中
onSelect(hero: Hero): void { this.selectedHero = hero; }
将选中的<li>的值赋给selectedHero ，页面上的
[class.selected]="hero === selectedHero"
所以被点击的<li>会加上样式.selected
因为上面的赋值selectedHero 不再是空的，所以下面出现该<li>的详情。