欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Angular2内置指令NgFor和NgIf详解

程序员文章站 2022-04-17 14:17:36
在这一章节中,我们来学习如何使用angular2来展示数据,以及如何使用它的内置指令ngfor和ngif 首先要确保你有一个可以运行起来的angular2的样例程序,最好...

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