Angular2内置指令NgFor和NgIf详解(2)

既然我们使用了TypeScript,我们就可以使用很多新的特性,比如说使用类去构建实例;接下来我们来使用Fruit类来构建我们的水果实例.首先我们在app文件夹下创建一个新的文件夹,就叫它classes吧,然后我们创建一个Fruit.ts文件,在这里面我们书写Fruit类的代码:

export class Fruit{ constructor( public name:string, public price: number ){} }

解释一下上面的代码,我们使用了构造函数,然后在构造函数里面声明了这个对象的两个属性;一个是name,另一个是price,我们使用构造函数里面的name:string,和price: number参数来创建和初始化这个对象的属性.接下来我们就可以在我们的程序中使用这个类了;

首先在app.component.ts中引入这个类:

import {Fruit} from './classes/Fruits';
然后在AppComponent中使用Fruit类来初始化我们的水果列表:

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>


最后的结果应该是下面这个样子:

Angular2内置指令NgFor和NgIf详解

最后不得不说,无论是ES6,还是TypeScript都让我感觉到了有种写Java感觉;这也算有利有弊吧,好处肯定是增加了代码的可读性,使程序更加容易维护,也更容易写出大型的项目,让团队协作也非常的便利;当然也有它的一些不足,不足主要是增加了大家的学习成本;当然一切向前看呀.

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzxjwd.html