Angular2内置指令NgFor和NgIf详解

在这一章节中,我们来学习如何使用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>

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

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

时间: 2016-07-31

详解Angular2 关于*ngFor 嵌套循环

在项目开发中拿到的数据是这样的,要循环遍历出来.可是在ng2中好像不能直接遍历Object datas: any = [ { num: 1, date: "2017-04-12", sellNum: "1231234", sellMpney: "1233", returnNum: "24"}, { num: 1, date: "2017-04-12", sellNum: "1231234"

详解Angular2中Input和Output用法及示例

对于angular2中的Input和Output可以和AngularJS中指令作类比. Input相当于指令的值绑定,无论是单向的(@)还是双向的(=).都是将父作用域的值"输入"到子作用域中,然后子作用域进行相关处理. Output相当于指令的方法绑定,子作用域触发事件执行响应函数,而响应函数方法体则位于父作用域中,相当于将事件"输出到"父作用域中,在父作用域中处理. 看个angular2示例吧,我们定义一个子组件,获取父作用域的数组值并以列表形式显示,然后当点击

详解Angular2组件之间如何通信

组件之间的共享可以有好几种方式 父->子 input 方式 import {Component,Input} from 'angular2/core'; @Component({ selector: 'child', template: ` <h2>child {{content}}</h2> ` }) class Child { @Input() content:string; } @Component({ selector: 'App', directives: [Chi

详解Angular2 之 结构型指令

Angular 有一个强力的模板引擎,它能让你轻松维护元素的DOM树结构. Angular指令可分为三种 组件 属性型指令 结构型指令 组件 组件其实就是一个带模板的指令.是这三种指令中最常用的,我们会编写大量的组件来构建application. 属性型指令 属性型指令会修改元素的外观或者行为. e.g. NgStyle可以修改元素的好几个样式. 结构型指令 结构型指令通过添加和删除 DOM 元素来改变DOM的布局. 我们经常看到的内置的结构型指令有:ngIf.ngSwitch.ngFor. 下

详解Angular2响应式表单

本文将半翻译半总结的讲讲ng2官网的另一个未翻译高级教程页面. 文章目的是使用ng2提供的响应式表单技术快速搭出功能完善丰富的界面表单组件. 响应式表单是一项响应式风格的ng2技术,本文将解释响应式表单并用来创建一个英雄详情编辑器. 包含内容: 响应式表单介绍 开始搭建 创建数据模型 创建响应式的表单组件 创建组建的模板文件 引入ReactiveFormsModule 显示HeroDetailComponent 添加一个FormGroup 看看表单模型 介绍FormBuilder 验证的需求 放

详解angular2实现ng2-router 路由和嵌套路由

实现ng2-router路由,嵌套路由 首先配置angular2的时候router模块已经下载,只需要引入即可 import {RouterModule, Routes} from "@angular/router"; 我们要创建一个嵌套路由,所以需要创建以下文件 index.html app.module.ts app.component.ts home.component.ts list.component.ts list-one.component.ts list-two.com

详解angular2采用自定义指令(Directive)方式加载jquery插件

由于angular2兴起不久,相关插件还是很少,所以有时候不得不用一些jquery插件来完成项目, 那么如何把jquery插件放到angular2中呢?采用自定义指令! 在上下文之前要引入jquery,这点不再描述 首先创建一个指令,采用@input方式,来获取jquery插件所需要的参数. 在ngOnChanges时,也就是参数通过@input传入时,初始化jquery插件, 初始化jquery插件需要获取dom元素,所以我们引入ElementRef,用来获取dom元素 这里需要讲一下,jqu

详解Angular2表单-模板驱动的表单(Template-Driven Forms)

在网页开发中,表单估计是最常用的一个,同时也是最麻烦.最容易出问题的.在一个稍微复杂一点的应用中,我们除了用表单元素收集数据,还需要验证,几个数据之间可能还会相互关联,然后根据不同的数据值调用不同的业务逻辑等. 使用Angular提供的数据绑定的功能,我们可以很容易就在组件中获得用户输入的数据,Angular也提供了几种验证方式方便我们进行数据的校验.但是,一些自定义的数据验证.数据交互和业务逻辑还是需要自己处理. 在Angular2中,提供了2种表单实现方式,分别是'template-driv

详解Angular2学习笔记之Html属性绑定

简介 基本HTML属性 <td [attr.colspan]="tableColspan"></td> Css 类绑定 <!-- 第一种情况 class 类全部替换 --> <div [class]="divClass">CSS 类绑定,[class] 全部替换的例子</div> <!-- 第二种情况 替换 class 类的部分属性 --> <div [class.a]="isS

详解angular2 控制视图的封装模式

为什么我想要分享控制视图的封装模式呢?主要是我们angular的项目大多数都会去引入一个UI组件,但往往因为需求和关系我们会去修改UI组件的样式.这时,因为有些人不是很了解View encapsulation里面的属性,往往会直接在全局的style.js里面添加全局样式,等项目越来越大,就会出现一些不知名的bug和维护起来变得困难.如果你运用好视图的封装模式,会帮你解决好很多的问题. 一般来说组件的 CSS 样式被封装进了自己的视图中,而不会影响到应用程序的其它部分.通过在组件的元数据上设置视图