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

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

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

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

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

上面的寫法其實只是一種簡寫的形式,實際上完整的寫法應(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';
  }
}

然后我們要修改我們的模板了,因為我們在模板中要使用較多的HTML,所以我們要使用反引號來包裹住我們的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ù)對象的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片段復(fù)制過去就好了.

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

接下來我們給AppComponent再添加一個屬性fruitsList,如下所示:

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

我們需要注意的地方是那個有注釋的地方,我們必須使用this.fruitsList來指代上面我們已經(jīng)定義好的屬性,如果使用fruitsList的話,Angular就不知道它表示是什么.
接下來我們要循環(huán)這個水果數(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>
  `
})

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

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

接下來要介紹的這個指令是NgIf,當(dāng)然這個指令和Angular1的ng-if指令基本上是相似的,根據(jù)后面表達(dá)式的值決定要不要在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后面寫上一個表達(dá)式,這個表達(dá)式被期望的返回結(jié)果是Boolean類型的值;然后*ngIf指令會根據(jù)這個表達(dá)式的值決定要不要在DOM上添加或者移除它掌控的這個元素.

既然我們使用了TypeScript,我們就可以使用很多新的特性,比如說使用類去構(gòu)建實例;接下來我們來使用Fruit類來構(gòu)建我們的水果實例.首先我們在app文件夾下創(chuàng)建一個新的文件夾,就叫它classes吧,然后我們創(chuàng)建一個Fruit.ts文件,在這里面我們書寫Fruit類的代碼:

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

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

首先在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]
}

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

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

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

最新評論