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