在這一章節中,我們來學習如何使用Angular2來展示數據,以及如何使用它的內置指令NgFor和NgIf
首先要確保你有一個可以運行起來的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感覺;這也算有利有弊吧,好處肯定是增加了代碼的可讀性,使程序更加容易維護,也更容易寫出大型的項目,讓團隊協作也非常的便利;當然也有它的一些不足,不足主要是增加了大家的學習成本;當然一切向前看呀.