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利用与或运算符优先级实现if else条件判断表达式
Apr 15 Javascript
JavaScript中的style.cssText使用教程
Nov 06 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
Apr 07 Javascript
相册展示PhotoSwipe.js插件实现
Aug 25 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
Jan 09 Javascript
JS简单获取当前日期和农历日期的方法
Apr 17 Javascript
详解vue 模版组件的三种用法
Jul 21 Javascript
使用mint-ui开发项目的一些心得(分享)
Sep 07 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
Apr 30 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
Dec 15 Javascript
React如何使用axios请求数据并把数据渲染到组件
Aug 05 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
PHP匿名函数和use子句用法实例
2016/03/16 PHP
win10环境PHP 7 安装配置【教程】
2016/05/09 PHP
jquery插件jbox使用iframe关闭问题
2009/02/09 Javascript
防止浏览器记住用户名及密码的简单实用方法
2013/04/22 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
2013/08/13 Javascript
跟我学习javascript的this关键字
2020/05/28 Javascript
jQuery基于ID调用指定iframe页面内的方法
2016/07/06 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
微信小程序 网络请求(post请求,get请求)
2017/01/17 Javascript
thinkjs之页面跳转同步异步操作
2017/02/05 Javascript
使用 jQuery 实现表单验证功能
2017/07/05 jQuery
angularjs数组判断是否含有某个元素的实例
2018/02/27 Javascript
Vue.js实现的购物车功能详解
2019/01/27 Javascript
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
[08:02]DOTA2牵红线 zhou神抱得美人归
2014/03/22 DOTA
[51:17]Mski vs VGJ.S Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
[04:00]黄浦江畔,再会英雄——完美世界DOTA2 TI9应援视频
2019/07/31 DOTA
Python中无限元素列表的实现方法
2014/08/18 Python
使用C语言来扩展Python程序和Zope服务器的教程
2015/04/14 Python
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
Pandas实现dataframe和np.array的相互转换
2019/11/30 Python
django框架cookie和session用法实例详解
2019/12/10 Python
python GUI库图形界面开发之PyQt5状态栏控件QStatusBar详细使用方法实例
2020/02/28 Python
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
NFL官方在线商店:NFLShop
2020/07/29 全球购物
AJAX的优缺点都有什么
2015/08/18 面试题
行政副总岗位职责
2014/02/23 职场文书
优秀会计求职信
2014/07/04 职场文书
新颖的化妆品活动方案
2014/08/21 职场文书
爱护公物演讲稿
2014/09/09 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
关于群众路线的心得体会
2014/11/05 职场文书
期末个人总结范文
2015/02/13 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang