[]angularjs 2.0官方新手入门教程(3)
http://alvinwei.blog.163.com/blog/static/214666110201616101635843/
2016-02-07 01:13:24| 分类: AngularJS2.0 | 标签:前端 angular angularjs2.0 javascript 入门教程
var 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" } ];
public heroes = HEROES;
<h2>My Heroes</h2> <ul class="heroes"> <li *ngFor="#hero of heroes"> <!-- each hero goes here --> </li> </ul>
<li *ngFor="#hero of heroes"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li>
等待页面自动刷新,我们就可以看到更新后的页面显示出所有的英雄id和name了。现在,我们可以用Chrome的检查元素去看一下这个列表的Elements,虽然我们只写了一个<li>标签,但是因为ngFor的遍历,会有很多个<li>标签显示出来,并且每个<li>里面的<span>对应的是不同的hero。因为<li>及其子元素<span>作为一个模板,被每个遍历后的hero套用很多次并显示出来。styles:[` .selected { background-color: #CFD8DC !important; color: white; } .heroes { margin: 0 0 2em 0; list-style-type: none; padding: 0; width: 10em; } .heroes li { cursor: pointer; position: relative; left: 0; background-color: #EEE; margin: .5em; padding: .3em 0em; height: 1.6em; border-radius: 4px; } .heroes li.selected:hover { color: white; } .heroes li:hover { color: #607D8B; background-color: #EEE; left: .1em; } .heroes .text { position: relative; top: -3px; } .heroes .badge { display: inline-block; font-size: small; color: white; padding: 0.8em 0.7em 0em 0.7em; background-color: #607D8B; line-height: 1em; position: relative; left: -1px; top: -4px; height: 1.8em; margin-right: .8em; border-radius: 4px 0px 0px 4px; } `]
你会发现我们又一次使用了(`)符号,以便将css多行显示。<h2>My Heroes</h2> <ul class="heroes"> <li *ngFor="#hero of heroes"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li> </ul>
等待页面自动刷新,我们就可以看到换上新样式的hero列表了。<li *ngFor="#hero of heroes" (click)="onSelect(hero)"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li>
这里的(click)="onSelect(hero)"代表了当我们点击某一个<li>标签时,会调用一个onSelect的函数,并将被点击的<li>标签中存储的那个hero对象作为参数传进去,()小括号在这里代表一个one way(单向)的data binding(数据绑定),方向是将hero传给onSelect函数。public selectedHero: Hero;
这个变量并不用初始化,因为最开始也没有hero被选择。onSelect(hero: Hero) { this.selectedHero = hero; }
<h2>{{selectedHero.name}} details!</h2> <div><label>id: </label>{{selectedHero.id}}</div> <div> <label>name: </label> <input [(ngModel)]="selectedHero.name" placeholder="name"/> </div>
这个代码有个问题,等页面自动刷新过后,我们发现什么都显示不出来。通过Chrome的console会发现报错说“EXCEPTION: TypeError: Cannot read property 'name' of undefined in [null]”,原因是我们没有给selectedHero赋初值,那么网页刚加载完以后selectedHero就是null,他的id和name属性自然也就是undefined。<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>
这个最外层的<div>的效果就是,如果selectedHero是null,那么就移除<div>及其里面的内容,注意,是移除,而不是hide(隐藏)。和ngFor一样,(*)星号在这里必不可少。完成以后,等待一下页面刷新,我们就会看到效果,当没有点击任何hero的时候,这部分页面是不会显示出来的。[class.selected]="hero === selectedHero"
这里套在class.selected外面的[]中括号代表这是一个one-way(单向)的data binding(数据绑定),方向是将data source,即hero === selectedHero的值(true or false)传回给页面,如果class.selected是true那么就应用style中.selected的样式(关于()小括号和[]中括号,即data binding方向的解释可以看我上一篇教程的结尾部分)。接下来等待页面刷新一下就可以看到效果了。import {Component} from 'angular2/core'; interface Hero { id: number; name: string; } @Component({ selector: 'my-app', template:` <h1>{{title}}</h1> <h2>My Heroes</h2> <ul class="heroes"> <li *ngFor="#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> `, styles:[` .selected { background-color: #CFD8DC !important; color: white; } .heroes { margin: 0 0 2em 0; list-style-type: none; padding: 0; width: 10em; } .heroes li { cursor: pointer; position: relative; left: 0; background-color: #EEE; margin: .5em; padding: .3em 0em; height: 1.6em; border-radius: 4px; } .heroes li.selected:hover { color: white; } .heroes li:hover { color: #607D8B; background-color: #EEE; left: .1em; } .heroes .text { position: relative; top: -3px; } .heroes .badge { display: inline-block; font-size: small; color: white; padding: 0.8em 0.7em 0em 0.7em; background-color: #607D8B; line-height: 1em; position: relative; left: -1px; top: -4px; height: 1.8em; margin-right: .8em; border-radius: 4px 0px 0px 4px; } `] }) export class AppComponent { public title = 'Tour of Heroes'; public heroes = HEROES; public selectedHero: Hero; onSelect(hero: Hero) { this.selectedHero = hero; } } var 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" } ];