來扯點ionic3[4] 結構型指令和列表渲染

《雷神3》上映已經一週，但由於各類緣由還沒來得去送票房，有多年不見的班納和洛基娘娘，期待他們在《諸神黃昏》和明年《無限戰爭》中的表現。

以前在學習創建頁面的時候已經體驗過了模板插值（把變量展現在頁面中），這一節便來挖掘更多的模板語法。

準備工做

方便起見，咱們此次處理項目中的默認頁面 ContactPage，在 contact.ts 中創建一個簡單的數組成員。

在 contact.html 中清空 ion-content 標籤的多餘內容。

至此，準備就緒，開始瞭解第一個指令。

重複性指令 ngFor

ngFor指令的做用是，將批量的數據（數組）結合HTML元素添加到頁面DOM中，它的語法參照了ES6中的 for...of 語句：

for (let i of [1,2,3,4,5,6]) { ... }

基本的使用

ngFor指令基本語法:

*ngFor="let value of [1,2,3,4,5,6]"

使用時注意不要遺漏星號（*）。

嘗試在 contact.html 中輸出 data 數組：

<ion-content>
  <div *ngFor="let item of data">{{item}}</div>
</ion-content>

模板中渲染的數據和頁面類中的屬性成員是緊密綁定的，當屬性發生變化，頁面也會立即做出相應：

ionViewDidEnter(){
      setInterval(()=>{
          this.data.push(this.data.length + 1);
      },500)
  }

在上面的代碼中，使用鉤子添加了一個間隔定時器，每半秒鐘向 data 數組中添加一個元素（*在ionic3中，若是沒有特殊的必要，請使用箭頭函數代替傳統的
function 聲明*）。

可見，在頁面中，每半秒鐘也會相應增長一個新的條目。

對象的渲染

在實際的開發中，咱們更常會去處理一個對象數組，這時候咱們經過點運算符(.) 輸出數組的屬性：

data:any = [
        {name:'託尼·史塔克', birthYear:1970, gender:1, description:'鋼鐵俠'},
        {name:'史蒂夫·羅傑斯', birthYear:1920, gender:1, description:'美國隊長'},
        {name:'娜塔莎羅·曼諾夫', birthYear:1928, gender:0, description:'黑寡婦'},
        {name:'索爾', birthYear:-5555,gender:1, description:'雷神'},
        {name:'克林頓·巴頓', birthYear:1974, gender:1, description:'鷹眼'},
        {name:'布魯斯·班納', birthYear:1975, gender:1, description:'綠巨人浩克'}
    ];

模板渲染：

<ion-content>
  <div *ngFor="let item of data">{{item.name}}</div>
</ion-content>

ionic的列表渲染

基本使用

在APP的開發中，對列表條目的渲染並不是是經過 div 來承載的，ionic 提供了列表專用的標籤 ion-list

<ion-list>
  <ion-item></ion-item>
</ion-list>

其中 ion-list 是列表容器， ion-item 是列表中的一個條目，當把 ion-item 和 ngFor 指令結合使用，就能夠渲染出一個多條目的列表：

<ion-content>
  <ion-list>
    <ion-item *ngFor="let item of data">{{item.name}}</ion-item>
  </ion-list>
</ion-content>

更復雜一些的列表

ion-item 裏能夠經過不一樣元素的組織讓列表承載更多信息

<ion-item *ngFor="let item of data">
  <h2>{{item.name}}</h2>
  <p>{{item.description}}</p>
</ion-item>

此外，ionic還提供一個指令 item-end 將指定的元素渲染在條目的尾部：

<ion-item *ngFor="let item of data">
      <h2>{{item.name}}</h2>
      <p>{{item.description}}</p>
      <p item-end>{{item.gender?'男':'女'}}, {{2017 - item.birthYear}} 歲</p>
    </ion-item>

（注：漫威電影宇宙中超級英雄的出生年份不可考 :) ）

此處除了點運算符(.) 輸出對象的屬性，還使用了一個計算表達式和一個條件表達式，這些都是咱們常見的用法。

加入頭像

利用 ion-avatar 標籤和 item-start 指令渲染一個有頭像的列表：

ion-avatar標籤的默認樣式會自動對圖片進行縮放和截取，呈現出如圖所示的圓形效果，此外也有一種能夠展現方形圖片的 ion-thumbnail 標籤（縮略圖標籤），你也能夠經過CSS來修改頭像的樣式。
（注：我事先已經準備好了圖片素材並將每位hero的avatar屬性寫進了data中。）

有條件地渲染：ngIf 指令

除了 ngFor ，還有一個很是經常使用的指令 ngIf ，經過一個表達式來判斷元素是否會被添加到模板中。這一指令一樣也是動態的：當表達式的值變爲真，元素便會添加；當表達式的值變爲假，元素會從模版中被移除。

*ngIf="isActive"

嘗試用 ngIf 指令來曬先男性英雄

<ion-list>
    <ng-container *ngFor="let item of data">
      <ion-item *ngIf="item.gender===1">
        <ion-avatar  item-start>
          <img src="{{item.avatar}}">
        </ion-avatar>
        <h2>{{item.name}}</h2>
        <p>{{item.description}}</p>
        <p item-end>{{item.gender?'男':'女'}}, {{2017 - item.birthYear}} 歲</p>
      </ion-item>
    </ng-container>
  </ion-list>

這兒要說明的是，在angular中，__ngFor 和 ngIf 不能放置在同一個標籤上__(Vue之類的框架則能夠)，所以在 ion-item 外加上一個「虛擬」的標籤 ng-container, 它自身不會被渲染到DOM中，只會渲染它包裹的內容（相似Vue中的 template 標籤）。所以在沒有 ngIf 的狀況下，把 ngFor 指令加在 ion-item 上和加在外層的 ng-container 標籤上效果是等同的；__而在有 ngIf 指令的狀況下，能夠經過 ng-container標籤避免兩個指令的衝突__。

參考文檔

1. Angular結構型指令
2. Ionic List API Docs
3. Ionic Item API Docs