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

发布时间：2020-12-17 09:34:49 所属栏目：安全来源：网络整理

导读：还是 angularjs2入门1-文件结构分析的源码，将app名称tutorial-step2-masterDetail 1.根据上一节的类，创建英雄数组，这个数组先从模拟数据吧，等后面再介绍怎么从网络服务器获取 const HEROES: Hero[] = [ { id: 11,name: 'Mr. Nice' },{ id: 12,name: 'Na

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!