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 相关文章推荐
IE8 引入跨站数据获取功能说明
Jul 22 Javascript
js控制不同的时间段显示不同的css样式的实例代码
Nov 04 Javascript
JS动态添加Table的TR,TD实现方法
Jan 28 Javascript
使用iojs的jsdom库实现同步系统时间
Apr 20 Javascript
js实现TAB切换对应不同颜色的代码
Aug 31 Javascript
JavaScript实现输入框与清空按钮联动效果
Sep 09 Javascript
原生JS改变透明度实现轮播效果
Mar 24 Javascript
详解node.js搭建代理服务器请求数据
Apr 08 Javascript
Angular.JS中select下拉框设置value的方法
Jun 20 Javascript
JavaScript文本特效实例小结【3个示例】
Dec 22 Javascript
微信小程序云开发详细教程
May 16 Javascript
Moment.js实现多个同时倒计时
Aug 26 Javascript
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
Ajax PHP分页演示
2007/01/02 PHP
如何从一个php文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
php feof用来识别文件末尾字符的方法
2010/08/01 PHP
PHP使用range协议实现输出文件断点续传代码实例
2014/07/04 PHP
php结合md5实现的加密解密方法
2016/01/25 PHP
golang与PHP输出excel示例
2016/07/22 PHP
PHP编程获取各个时间段具体时间的方法
2017/05/26 PHP
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
JavaScript 原型继承
2011/12/26 Javascript
JavaScript中valueOf函数与toString方法深入理解
2012/12/02 Javascript
『jQuery』取指定url格式及分割函数应用
2013/04/22 Javascript
JS检测图片大小的实例
2013/08/21 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
使用变量动态设置js的属性名
2014/10/19 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
2014/10/31 Javascript
JS模式之简单的订阅者和发布者模式完整实例
2015/06/30 Javascript
JavaScript实现的多个图片广告交替显示效果代码
2015/09/04 Javascript
跟我学习javascript的循环
2015/11/18 Javascript
基于jQuery倒计时插件实现团购秒杀效果
2016/05/13 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
backbone简介_动力节点Java学院整理
2017/07/14 Javascript
原生JS实现瀑布流插件
2018/02/06 Javascript
webpack+react+antd脚手架优化的方法
2018/04/02 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
Python实现的矩阵类实例
2017/08/22 Python
Python实现判断给定列表是否有重复元素的方法
2018/04/11 Python
python实现周期方波信号频谱图
2018/07/21 Python
python统计指定目录内文件的代码行数
2019/09/19 Python
python 6.7 编写printTable()函数表格打印(完整代码)
2020/03/25 Python
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
高中军训感言200字
2014/02/23 职场文书
创先争优公开承诺书
2014/08/30 职场文书
2015年乡镇纪委工作总结
2015/05/26 职场文书
2016大一新生军训心得体会
2016/01/11 职场文书
SQL Server2019数据库备份与还原脚本,数据库可批量备份
2021/11/20 SQL Server