AngularJS2.0 学习笔记03:列表(在线算命App step2)

2016年09月13日 APP开发, javascript 暂无评论 阅读 35 views 次

上一节的使用对象来定义东西比较麻烦,本节引入列表概念,来对上节课的代码进行重构:

笔记02的基础上学习列表的使用。

列表显示

列表显示需要用到ngFor,在 app.component.ts中定义一个数组,数组定义在文件末尾,代码如下:

 

var HEROES: Hero[] = [{
id: 1,
name: '上上',
desc:'大吉大利,百事顺遂,赶紧去买彩票'},
{id: 2,
name: '上吉',
desc:'天时、地利又人和,家庭和睦,身体健康,会朋友喝酒吧'},
{id: 3,
name: '中吉',
desc:'苦尽甘来,风雨之后见彩虹,要转好运了'},
{id: 4,
name: '中平',
desc:'黎明前的曙光。寓象中不是“怀才不遇”,而是“怀才待遇”。多嘱求者“一动不若一静”。无大喜亦无大悲。在这五种签意中,最欣赏的还是中平签,因为它更符合百姓,贴近生活。其不似“上上”般如中头彩;不似“上吉”般天时、地利又人和;不似“中吉”般起起落落,如咖啡加糖;“中平”更多的是人们常求的“平平”和“淡淡”。'},
{id: 5,
name: '下下',
desc:'凶多吉少.否极泰来,物极必反,再熬一熬就过去了。要不再抽一签?'}

]
;

 

上面的代码是定义了一个名称为HEROES的数组,类型是Hero

然后赋值给AppComponent中的属性heroes。

public heroes = HEROES;

使用ngFor指令循环取出heroes的值,template中的代码如下:

<h2>英雄列表</h2>
<ul class="heroes">
    <li *ngFor="#hero of heroes"> 
          <span class="badge">{{hero.id}}</span> {{hero.name}}
{{hero.desc}}
</li> </ul>

上面使用了class="badge"样式,我们需要在AppComponenttemplate属性后面添加style属性来定义样式的内容。 代码如下:

styles:[`
  .heroes {list-style-type: none; margin-left: 1em; padding: 0; width: 10em;}
  .heroes li { cursor: pointer; position: relative; left: 0; transition: all 0.2s ease; }
  .heroes li:hover {color: #369; background-color: #EEE; left: .2em;}
  .heroes .badge {
    font-size: small;
    color: white;
    padding: 0.1em 0.7em;
    background-color: #369;
    line-height: 1em;
    position: relative;
    left: -1px;
    top: -1px;
  }
  .selected { background-color: #EEE; color: #369; }
`]
至此 循环遍历一个数组基本已实现。app.component.ts中的完整代码如下:
import {Component} from 'angular2/core';

interface Hero {
 id: number;
 name: string;
 desc:string;
}


@Component({
 selector: 'my-app',
 template: `
 <h4>{{title}}</h4>
 <h2>{{hero.name}} <em>{{hero.desc}}</em></h2>
 
 <div>
 <label>name: </label>
 <div><input [(ngModel)]="hero.name" placeholder="name"></div>
 </div>

 <h2>神签列表</h2>
 <ul class="heroes">
 <li *ngFor="#hero of heroes"> <span class="badge">{{hero.id}}</span> {{hero.name}}<em>{{hero.desc}}</em></li>
 </ul>
 `,
 styles:[`
 .heroes {list-style-type: none; margin-left: 1em; padding: 0; width: 10em;}
 .heroes li { cursor: pointer; position: relative; left: 0; transition: all 0.2s ease; }
 .heroes li:hover {color: #369; background-color: #EEE; left: .2em;}
 .heroes .badge {
 font-size: small;
 color: white;
 padding: 0.1rem 0.7em;
 background-color: #369;
 line-height: 1rem;
 position: relative;
 left: -1px;
 top: -1px;
 }
 em{
 font-size:0.8rem;}
 .selected { background-color: #EEE; color: #369; }
 `]
})
export class AppComponent { 
 public title = '抽签算卦';
 public hero: Hero = {
 id: 1,
 name: '吕氏灵签',
 desc:'仅为娱乐,无其它参考意义'
 };
 public heroes = HEROES;
}
 var HEROES: Hero[] = [
 {id: 1,
 name: '上上',
 desc:'大吉大利,百事顺遂,赶紧去买彩票'},
 {id: 2,
 name: '上吉',
 desc:'天时、地利又人和,家庭和睦,身体健康,会朋友喝酒吧'},
 {id: 3,
 name: '中吉',
 desc:'苦尽甘来,风雨之后见彩虹,要转好运了'},
 {id: 4,
 name: '中平',
 desc:'黎明前的曙光。寓象中不是“怀才不遇”,而是“怀才待遇”。多嘱求者“一动不若一静”。无大喜亦无大悲。在这五种签意中,最欣赏的还是中平签,因为它更符合百姓,贴近生活。其不似“上上”般如中头彩;不似“上吉”般天时、地利又人和;不似“中吉”般起起落落,如咖啡加糖;“中平”更多的是人们常求的“平平”和“淡淡”。'},
 {id: 5,
 name: '下下',
 desc:'凶多吉少.否极泰来,物极必反,再熬一熬就过去了。要不再抽一签?'}
 
 ] ;
2016-09-13_173045

给我留言

您必须 登录 才能发表留言!

Copyright © 大一网 保留所有权利.  

用户登录

分享到: