DIV CSS 佈局教程網

在這一章節中,我們來學習如何使用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感覺;這也算有利有弊吧,好處肯定是增加了代碼的可讀性,使程序更加容易維護,也更容易寫出大型的項目,讓團隊協作也非常的便利;當然也有它的一些不足,不足主要是增加了大家的學習成本;當然一切向前看呀.