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 相关文章推荐
javascript (用setTimeout而非setInterval)
Dec 28 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
Jun 26 Javascript
热点新闻滚动特效的js代码
Aug 17 Javascript
js检测网络是否具体连接功能的代码
May 23 Javascript
node.js操作mongoDB数据库示例分享
Nov 26 Javascript
JQuery Ajax WebService传递参数的简单实例
Nov 02 Javascript
Bootstrap select下拉联动(jQuery cxselect)
Jan 04 Javascript
浅谈javascript的闭包
Jan 23 Javascript
支持移动端原生js轮播图
Feb 16 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
Dec 26 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
May 29 Javascript
js实现鼠标拖拽缩放div实例代码
Mar 25 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
教你IIS6的PHP最佳配置方法
2006/09/05 PHP
php 输出双引号&quot;与单引号'的方法
2010/05/09 PHP
php图片处理:加水印、缩略图的实现(自定义函数:watermark、thumbnail)
2010/12/02 PHP
php根据日期显示所在星座的方法
2015/07/13 PHP
百度地图经纬度转换到腾讯地图/Google 对应的经纬度
2015/08/28 PHP
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
基于JQuery的一句代码实现表格的简单筛选
2010/07/26 Javascript
jQuery1.4.2与老版本json格式兼容的解决方法
2011/02/12 Javascript
jquery 使用点滴函数代码
2011/05/20 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
2012/05/04 Javascript
jQuery中 noConflict() 方法使用
2013/04/25 Javascript
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
2015/02/23 Javascript
jQuery使用drag效果实现自由拖拽div
2015/06/11 Javascript
iPhone手机上搭建nodejs服务器步骤方法
2015/07/06 NodeJs
过期软件破解办法实例详解
2017/01/04 Javascript
extjs简介_动力节点Java学院整理
2017/07/17 Javascript
写一个Vue Popup组件
2019/02/25 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
[02:56]DOTA2矮人直升机 英雄基础教程
2013/11/26 DOTA
使用Template格式化Python字符串的方法
2019/01/22 Python
Python3标准库之functools管理函数的工具详解
2020/02/27 Python
python调用摄像头的示例代码
2020/09/28 Python
python 视频下载神器(you-get)的具体使用
2021/01/06 Python
HTML5中Localstorage的使用教程
2015/07/09 HTML / CSS
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
P D PAOLA法国官网:西班牙著名的珠宝首饰品牌
2020/02/15 全球购物
Hammitt官网:设计师手袋
2020/05/23 全球购物
法律专业应届本科毕业生求职信
2013/10/25 职场文书
《胡杨》教学反思
2014/02/16 职场文书
《金色的脚印》教后反思
2014/04/23 职场文书
火灾现场处置方案
2014/05/28 职场文书
超市收银员岗位职责
2015/04/07 职场文书
学校教学工作总结2015
2015/05/19 职场文书
开票证明
2015/06/23 职场文书
如何在Python中妥善使用进度条详解
2022/04/05 Python