还是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>的详情。
