Angular2基础之展示数据
在这一章节中,我们来学习如何使用Angular2来展示数据,以及如何使用它的内置指令 首先要确保你有一个可以运行起来的Angular2的样例程序,最好就是我们上一章节中完成的那个QuickStart小项目或者你自己根据官网上面的步骤完成的QuickStart小项目,因为我们的讲解都是在那个基础上来进行的;然后让我们开始下面的快乐旅程吧. 因为我们的这一系列的文章都是使用的 上一节中我们在 export class AppComponent { username = 'dreamapple'; age = 22; fruit = 'apple' } 上面的写法其实只是一种简写的形式,实际上完整的写法应该是这样的: export class AppComponent { //username = 'dreamapple'; //age = 22; //fruit = 'apple' username: string; age: number; fruit: string; constructor() { this.username = 'dreamapple'; this.age = 22; this.fruit = 'apple'; } } 然后我们要修改我们的模板了,因为我们在模板中要使用较多的HTML,所以我们要使用反引号来包裹住我们的HTML片段;我们的装饰器函数如下所示: @Component({ selector: 'my-app',template:` <p>My name is: {{username}}</p> <p>My age is: {{age}}</p> <p>My favorite fruit is: {{fruit}}</p> ` }) 当然我们也可以使用装饰器函数中元数据对象的 @Component({ selector: 'my-app',//template:` // <p>My name is: {{username}}</p> // <p>My age is: {{age}}</p> // <p>My favorite fruit is: {{fruit}}</p> //`,templateUrl: 'app/templates/app-template.html' }) 其中 从上面的过程中,我们可以看到 接下来我们给 export class AppComponent { username = 'dreamapple'; age = 22; fruitsList = ['apple','orange','pear','banana']; fruit = this.fruitsList[0]; // 这里要使用 this.fruitsList[0] } 我们需要注意的地方是那个有注释的地方,我们必须使用 @Component({ selector: 'my-app',template:` <p>My name is: {{username}}</p> <p>My age is: {{age}}</p> <ul> <li *ngFor="let fruit of fruitsList">{{fruit}}</li> </ul> <p>My favorite fruit is: {{fruit}}</p> ` }) 上面的代码中有几个地方是需要注意的地方,首先我们使用了 <li *ngFor="let fruit of fruitsList; let i = index;">{{i}}-{{fruit}}</li> 上面的模板代码有一些需要注意的地方,首先要知道 接下来要介绍的这个指令是 <p *ngIf="fruitsList.length > 3">fruitsList's length is bigger than 3</p> <p *ngIf="fruitsList.length <= 3">fruitsList's length is not bigger than 3</p> 首先要指出的是,和使用 既然我们使用了 export class Fruit{ constructor( public name:string,public price: number ){} } 解释一下上面的代码,我们使用了构造函数,然后在构造函数里面声明了这个对象的两个属性;一个是 首先在 import {Fruit} from './classes/Fruits'; 然后在 export class AppComponent { username = 'dreamapple'; age = 22; fruitsList = [ new Fruit('apple',20),new Fruit('orange',30),new Fruit('pear',40),new Fruit('banana',50) ]; //noinspection TypeScriptUnresolvedVariable fruit = this.fruitsList[0].name; // 这里要使用 this.fruitsList[0] } 然后也要改一下我们的模板: <li *ngFor="let fruit of fruitsList; let i = index;">{{i}}-{{fruit.name}}-{{fruit.price}}</li> 最后的结果应该是下面这个样子: 最后不得不说,无论是ES6,还是TypeScript都让我感觉到了有种写Java感觉;这也算有利有弊吧,好处肯定是增加了代码的可读性,使程序更加容易维护,也更容易写出 如果本篇文章你有哪里不明白,或者是那里有错误你都可以在这里指出来,当然更欢迎热爱Angular2的童鞋来加入我们这个组织哈. 原文链接:hacking-with-angular.github.io (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |