AngularJS2.0 学习笔记02:对象的使用(在线算命App step1)

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

quick start 学习之后,在quick start 基础上学习如何开发难度大一点的应用。 拷贝上一节的angular2-quickstart目录内容到新目录 angular2-tour-of-heroes。拷贝完成后 使用 npm start 命令运行一下 看是否可以正常运行。

D:\angular2\angular2-tour-of-heroes>npm start
在AppComponent中增加2个属性 titlehero ,代码如下:

public title = '抽签算卦';
 public hero: Hero = {arr:[{
 id: 1,
 name: '上上',
 desc:'大吉大利,百事顺遂,赶紧去买彩票'},
 {id: 2,
 name: '上吉',
 desc:'天时、地利又人和,家庭和睦,身体健康,会朋友喝酒吧'},
 {id: 3,
 name: '中吉',
 desc:'苦尽甘来,风雨之后见彩虹,要转好运了'},
 {id: 4,
 name: '中平',
 desc:'黎明前的曙光。寓象中不是“怀才不遇”,而是“怀才待遇”。多嘱求者“一动不若一静”。无大喜亦无大悲。在这五种签意中,最欣赏的还是中平签,因为它更符合百姓,贴近生活。其不似“上上”般如中头彩;不似“上吉”般天时、地利又人和;不似“中吉”般起起落落,如咖啡加糖;“中平”更多的是人们常求的“平平”和“淡淡”。'},
 {id: 5,
 name: '下下',
 desc:'凶多吉少.否极泰来,物极必反,再熬一熬就过去了。要不再抽一签?'}
 
 ]
 };
修改一下组件中Template中的代码,看一下绑定的数据,如果是多行的template,需要使用` (顿号)包裹。例如:
template: `
 <h1>{{title}}</h1>
 <h2>{{hero.arr[0].name}} </h2>
 <h3>{{hero.arr[0].desc}} </h3>
 <div><label>id: </label><input [(ngModel)]="hero.arr[0].id" placeholder="Id"></div>
 <div>
 <label>name: </label>
 <div>
 <input [(ngModel)]="hero.arr[0].name" placeholder="Name">
 </div>
 </div>

 `如果需要input里面的内容和h2的内容联动,当input里面的内容更改时,h2上的内容也跟着更改。需要使用angular的ngModel进行数据绑定。
<input [(ngModel)]="hero.name"  placeholder="name">
 

定义interface对象的代码写在最上面。例如:

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

当需要除简单类型之外的对象时,需要用到interface或者class,当一个类带有逻辑或者运行状态的时候需要定义为class,当只是检查类型匹配,interface足以,而且轻量级。

 

成果物下载:app.component

 

效果:

2016-09-13_173045

给我留言

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

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

用户登录

分享到: