Angular2内置指令NgFor和NgIf详解


Posted in Javascript onAugust 03, 2016

在这一章节中,我们来学习如何使用Angular2来展示数据,以及如何使用它的内置指令NgForNgIf

首先要确保你有一个可以运行起来的Angular2的样例程序,最好就是我们上一章节中完成的那个QuickStart小项目或者你自己根据官网上面的步骤完成的QuickStart小项目,因为我们的讲解都是在那个基础上来进行的;然后让我们开始下面的快乐旅程吧.

因为我们的这一系列的文章都是使用的TypeScript所以在看下面的内容之前你最好可以看一下TypeScript或者ES6的类,它们的网址分别是TypeScript,ES6;如果以前你学过Java或者C++这种类似的面向对象的语言的话,那么学习这里的类就很轻松了;这里面的类基本上和那些语言中的类是相似的.

上一节中我们在app.component.ts中导出了一个空的类,那么下面我们就要开始填充它,让它变得丰满起来.首先我们给这个AppComponent类(组件)添加三个属性,分别是name,age,fruit;就像下面这样:

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>
  `
})

当然我们也可以使用装饰器函数中元数据对象的templateUrl配置选项,如下所示:

@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'
})

其中app/templates/app-template.html表示的是程序的根目录app(而不是angular2-travel)下的templates文件夹下的app-template.html文件,然后将我们之前写的HTML片段复制过去就好了.

从上面的过程中,我们可以看到Angular2显示数据依然使用的是Angular1惯用的双大括号;它作为一个插值符号,在这个插值符号出现的地方就是我们要显示的数据的地方.接下来我们要学习使用NgFor这个内置指令了,熟悉Angular1的同学应该很容易就上手这个指令,因为NgFor和ng-repeat基本是一样的;它用来循环一个可迭代的对象,一般情况下会是一个数组.

接下来我们给AppComponent再添加一个属性fruitsList,如下所示:

export class AppComponent {
  username = 'dreamapple';
  age = 22;
  fruitsList = ['apple', 'orange', 'pear', 'banana'];
  fruit = this.fruitsList[0]; // 这里要使用 this.fruitsList[0]
}

我们需要注意的地方是那个有注释的地方,我们必须使用this.fruitsList来指代上面我们已经定义好的属性,如果使用fruitsList的话,Angular就不知道它表示是什么.
接下来我们要循环这个水果数组了,看看如何在模板中表示吧.

@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>
  `
})

上面的代码中有几个地方是需要注意的地方,首先我们使用了*ngFor而不是ngFor,这里的*是不能够去掉的;如果去掉的话那么我们的程序不会报错,但是我们只循环出来了数组的第一项.关于为何要加*,你可以详细的看看这里模板语法;当然我们可以在*ngFor表达式的后面写一些能够帮助我们展示每一项索引的操作,可以像下面这样:

<li *ngFor="let fruit of fruitsList; let i = index;">{{i}}-{{fruit}}</li>
上面的模板代码有一些需要注意的地方,首先要知道*ngFor后面跟的是表达式,所以我们可以写一些简单的表达式,帮助我们更好地进行循环;还有我们使用了let关键词,增加了块级作用域,使我们的这些变量都限定在*ngFor这个循环块中.好啦,如果你想更多地了解*ngFor,你可以看一下官方关于NgFor的API.

接下来要介绍的这个指令是NgIf,当然这个指令和Angular1的ng-if指令基本上是相似的,根据后面表达式的值决定要不要在DOM上添加或者移除一个元素.

看看我们是如何在模板使用这个指令的:

<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>
首先要指出的是,和使用*ngFor一样,我们使用了*ngIf;然后我们可以在*ngIf后面写上一个表达式,这个表达式被期望的返回结果是Boolean类型的值;然后*ngIf指令会根据这个表达式的值决定要不要在DOM上添加或者移除它掌控的这个元素.

既然我们使用了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感觉;这也算有利有弊吧,好处肯定是增加了代码的可读性,使程序更加容易维护,也更容易写出大型的项目,让团队协作也非常的便利;当然也有它的一些不足,不足主要是增加了大家的学习成本;当然一切向前看呀.

Javascript 相关文章推荐
js实现touch移动触屏滑动事件
Apr 17 Javascript
JavaScript Length 属性的总结
Nov 02 Javascript
javascript基础知识分享之类与函数化
Feb 13 Javascript
Js与Jq获取浏览器和对象值的方法
Mar 18 Javascript
JS简单编号生成器实现方法(附demo源码下载)
Apr 05 Javascript
微信小程序开发实战教程之手势解锁
Nov 18 Javascript
js闭包用法实例详解
Dec 13 Javascript
JQuery ZTree使用方法详解
Jan 07 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
Jan 25 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
Aug 13 Javascript
vue项目强制清除页面缓存的例子
Nov 06 Javascript
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
JS简单实现点击复制链接的方法
Aug 03 #Javascript
JS清除字符串中重复值的实现方法
Aug 03 #Javascript
JS使用onerror捕获异常示例
Aug 03 #Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
Aug 03 #Javascript
AngularJS基础 ng-value 指令简单示例
Aug 03 #Javascript
JS简单获取及显示当前时间的方法
Aug 03 #Javascript
AngularJS基础 ng-switch 指令简单示例
Aug 03 #Javascript
You might like
基于PHP异步执行的常用方式详解
2013/06/03 PHP
PHP伪静态Rewrite设置之APACHE篇
2014/07/30 PHP
php批量修改表结构实例
2017/05/24 PHP
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
Node.js的包详细介绍
2015/01/14 Javascript
深入分析Cookie的安全性问题
2015/03/01 Javascript
JavaScript判断是否为数组的3种方法及效率比较
2015/04/01 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
jQuery中选择器的基础使用教程
2016/05/23 Javascript
Vuejs第十三篇之组件——杂项
2016/09/09 Javascript
半个小时学json(json传递示例)
2016/12/25 Javascript
weui框架实现上传、预览和删除图片功能代码
2017/08/24 Javascript
使用3D引擎threeJS实现星空粒子移动效果
2020/09/13 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
灵活使用console让js调试更简单的方法步骤
2019/04/23 Javascript
node省市区三级数据性能测评实例分析
2019/11/06 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
Python re模块介绍
2014/11/30 Python
Python操作串口的方法
2015/06/17 Python
基于python进行桶排序与基数排序的总结
2018/05/29 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
python交易记录整合交易类详解
2019/07/03 Python
利用python在大量数据文件下删除某一行的例子
2019/08/21 Python
python__new__内置静态方法使用解析
2020/01/07 Python
python numpy 矩阵堆叠实例
2020/01/17 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
SIXPAD智能健身仪英国官网:革命性的训练装备品牌
2018/09/27 全球购物
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
旅行社优秀创业计划书
2014/08/16 职场文书
代办社保委托书范文
2014/10/06 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
暂住证明怎么写
2015/06/19 职场文书
技术转让协议书
2016/03/19 职场文书
2016年法制宣传月活动总结
2016/04/01 职场文书
十大最强奥特曼武器:怪兽战斗仪在榜,第五奥特之父只使用过一次
2022/03/18 日漫
在windows server 2012 r2中安装mysql的详细步骤
2022/07/23 Servers