在這一章節(jié)中,我們來(lái)學(xué)習(xí)如何使用Angular2來(lái)展示數(shù)據(jù),以及如何使用它的內(nèi)置指令NgFor和NgIf

首先要確保你有一個(gè)可以運(yùn)行起來(lái)的Angular2的樣例程序,最好就是我們上一章節(jié)中完成的那個(gè)QuickStart小項(xiàng)目或者你自己根據(jù)官網(wǎng)上面的步驟完成的QuickStart小項(xiàng)目,因?yàn)槲覀兊闹v解都是在那個(gè)基礎(chǔ)上來(lái)進(jìn)行的;然后讓我們開始下面的快樂(lè)旅程吧.

因?yàn)槲覀兊倪@一系列的文章都是使用的TypeScript所以在看下面的內(nèi)容之前你最好可以看一下TypeScript或者ES6的類,它們的網(wǎng)址分別是TypeScript,ES6;如果以前你學(xué)過(guò)Java或者C++這種類似的面向?qū)ο蟮恼Z(yǔ)言的話,那么學(xué)習(xí)這里的類就很輕松了;這里面的類基本上和那些語(yǔ)言中的類是相似的.

上一節(jié)中我們?cè)?code>app.component.ts中導(dǎo)出了一個(gè)空的類,那么下面我們就要開始填充它,讓它變得豐滿起來(lái).首先我們給這個(gè)AppComponent類(組件)添加三個(gè)屬性,分別是name,age,fruit;就像下面這樣:

export class AppComponent {
  username = 'dreamapple';
  age = 22;
  fruit = 'apple'
}

上面的寫法其實(shí)只是一種簡(jiǎn)寫的形式,實(shí)際上完整的寫法應(yīng)該是這樣的:

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';
  }
}

然后我們要修改我們的模板了,因?yàn)槲覀冊(cè)谀０逯幸褂幂^多的HTML,所以我們要使用反引號(hào)來(lái)包裹住我們的HTML片段;我們的裝飾器函數(shù)如下所示:

@Component({
  selector: 'my-app',
  template:`
    <p>My name is: {{username}}</p>
    <p>My age is: {{age}}</p>
    <p>My favorite fruit is: {{fruit}}</p>
  `
})

當(dāng)然我們也可以使用裝飾器函數(shù)中元數(shù)據(jù)對(duì)象的templateUrl配置選項(xiàng),如下所示:

@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片段復(fù)制過(guò)去就好了.

從上面的過(guò)程中,我們可以看到Angular2顯示數(shù)據(jù)依然使用的是Angular1慣用的雙大括號(hào);它作為一個(gè)插值符號(hào),在這個(gè)插值符號(hào)出現(xiàn)的地方就是我們要顯示的數(shù)據(jù)的地方.接下來(lái)我們要學(xué)習(xí)使用NgFor這個(gè)內(nèi)置指令了,熟悉Angular1的同學(xué)應(yīng)該很容易就上手這個(gè)指令,因?yàn)镹gFor和ng-repeat基本是一樣的;它用來(lái)循環(huán)一個(gè)可迭代的對(duì)象,一般情況下會(huì)是一個(gè)數(shù)組.

接下來(lái)我們給AppComponent再添加一個(gè)屬性fruitsList,如下所示:

export class AppComponent {
  username = 'dreamapple';
  age = 22;
  fruitsList = ['apple', 'orange', 'pear', 'banana'];
  fruit = this.fruitsList[0]; // 這里要使用 this.fruitsList[0]
}

我們需要注意的地方是那個(gè)有注釋的地方,我們必須使用this.fruitsList來(lái)指代上面我們已經(jīng)定義好的屬性,如果使用fruitsList的話,Angular就不知道它表示是什么.
接下來(lái)我們要循環(huán)這個(gè)水果數(shù)組了,看看如何在模板中表示吧.

@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>
  `
})

上面的代碼中有幾個(gè)地方是需要注意的地方,首先我們使用了*ngFor而不是ngFor,這里的*是不能夠去掉的;如果去掉的話那么我們的程序不會(huì)報(bào)錯(cuò),但是我們只循環(huán)出來(lái)了數(shù)組的第一項(xiàng).關(guān)于為何要加*,你可以詳細(xì)的看看這里模板語(yǔ)法;當(dāng)然我們可以在*ngFor表達(dá)式的后面寫一些能夠幫助我們展示每一項(xiàng)索引的操作,可以像下面這樣:

<li *ngFor="let fruit of fruitsList; let i = index;">{{i}}-{{fruit}}</li>
上面的模板代碼有一些需要注意的地方,首先要知道*ngFor后面跟的是表達(dá)式,所以我們可以寫一些簡(jiǎn)單的表達(dá)式,幫助我們更好地進(jìn)行循環(huán);還有我們使用了let關(guān)鍵詞,增加了塊級(jí)作用域,使我們的這些變量都限定在*ngFor這個(gè)循環(huán)塊中.好啦,如果你想更多地了解*ngFor,你可以看一下官方關(guān)于NgFor的API.

接下來(lái)要介紹的這個(gè)指令是NgIf,當(dāng)然這個(gè)指令和Angular1的ng-if指令基本上是相似的,根據(jù)后面表達(dá)式的值決定要不要在DOM上添加或者移除一個(gè)元素.

看看我們是如何在模板使用這個(gè)指令的:

<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后面寫上一個(gè)表達(dá)式,這個(gè)表達(dá)式被期望的返回結(jié)果是Boolean類型的值;然后*ngIf指令會(huì)根據(jù)這個(gè)表達(dá)式的值決定要不要在DOM上添加或者移除它掌控的這個(gè)元素.

既然我們使用了TypeScript,我們就可以使用很多新的特性,比如說(shuō)使用類去構(gòu)建實(shí)例;接下來(lái)我們來(lái)使用Fruit類來(lái)構(gòu)建我們的水果實(shí)例.首先我們?cè)赼pp文件夾下創(chuàng)建一個(gè)新的文件夾,就叫它c(diǎn)lasses吧,然后我們創(chuàng)建一個(gè)Fruit.ts文件,在這里面我們書寫Fruit類的代碼:

export class Fruit{
  constructor(
    public name:string,
    public price: number
  ){}
}

解釋一下上面的代碼,我們使用了構(gòu)造函數(shù),然后在構(gòu)造函數(shù)里面聲明了這個(gè)對(duì)象的兩個(gè)屬性;一個(gè)是name,另一個(gè)是price,我們使用構(gòu)造函數(shù)里面的name:string,和price: number參數(shù)來(lái)創(chuàng)建和初始化這個(gè)對(duì)象的屬性.接下來(lái)我們就可以在我們的程序中使用這個(gè)類了;

首先在app.component.ts中引入這個(gè)類:

import {Fruit} from './classes/Fruits';
然后在AppComponent中使用Fruit類來(lái)初始化我們的水果列表:

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]
}

然后也要改一下我們的模板:

最后的結(jié)果應(yīng)該是下面這個(gè)樣子:

最后不得不說(shuō),無(wú)論是ES6,還是TypeScript都讓我感覺(jué)到了有種寫Java感覺(jué);這也算有利有弊吧,好處肯定是增加了代碼的可讀性,使程序更加容易維護(hù),也更容易寫出大型的項(xiàng)目,讓團(tuán)隊(duì)協(xié)作也非常的便利;當(dāng)然也有它的一些不足,不足主要是增加了大家的學(xué)習(xí)成本;當(dāng)然一切向前看呀.

最新評(píng)論