往期傳送門
來扯點(diǎn)ionic3[0] 吹完牛再入門也不遲
來扯點(diǎn)ionic3[1] 創(chuàng)建一個(gè)新頁面
來扯點(diǎn)ionic3[2] 頁面一線牽 珍惜這段緣
來扯點(diǎn)ionic3[3] 頁面的生命周期事件望抽，也就是凡間所說的鉤子
《雷神3》上映已經(jīng)一周，但因?yàn)楦鞣N原因還沒來得去送票房杂腰，有多年不見的班納和洛基娘娘饲握，期待他們?cè)凇吨T神黃昏》和明年《無限戰(zhàn)爭(zhēng)》中的表現(xiàn)瓜浸。
之前在學(xué)習(xí)建立頁面的時(shí)候已經(jīng)體驗(yàn)過了模板插值（把變量展示在頁面中），這一節(jié)便來挖掘更多的模板語法。
準(zhǔn)備工作
方便起見攘残，我們這次處理項(xiàng)目中的默認(rèn)頁面 ContactPage，在 contact.ts 中建立一個(gè)簡(jiǎn)單的數(shù)組成員为狸。
在 contact.html 中清空 ion-content 標(biāo)簽的多余內(nèi)容肯腕。
至此，準(zhǔn)備就緒钥平，開始了解第一個(gè)指令实撒。
重復(fù)性指令 ngFor
ngFor指令的作用是姊途，將批量的數(shù)據(jù)（數(shù)組）結(jié)合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]"
使用時(shí)注意不要遺漏星號(hào)（*）知态。
嘗試在 contact.html 中輸出 data 數(shù)組：
<ion-content>
<div *ngFor="let item of data">{{item}}</div>
</ion-content>
模板中渲染的數(shù)據(jù)和頁面類中的屬性成員是緊密綁定的捷兰，當(dāng)屬性發(fā)生變化，頁面也會(huì)當(dāng)即作出相應(yīng)：
ionViewDidEnter(){
setInterval(()=>{
this.data.push(this.data.length + 1);
},500)
}
在上面的代碼中负敏，使用鉤子添加了一個(gè)間隔定時(shí)器贡茅，每半秒鐘向 data 數(shù)組中添加一個(gè)元素（在ionic3中，如果沒有特殊的必要其做，請(qǐng)使用箭頭函數(shù)代替?zhèn)鹘y(tǒng)的
function 聲明）顶考。
可見，在頁面中妖泄，每半秒鐘也會(huì)相應(yīng)增加一個(gè)新的條目驹沿。
對(duì)象的渲染
在實(shí)際的開發(fā)中，我們更常會(huì)去處理一個(gè)對(duì)象數(shù)組蹈胡，這時(shí)候我們通過點(diǎn)運(yùn)算符(.) 輸出數(shù)組的屬性：
data:any = [
{name:'托尼·史塔克', birthYear:1970, gender:1, description:'鋼鐵俠'},
{name:'史蒂夫·羅杰斯', birthYear:1920, gender:1, description:'美國(guó)隊(duì)長(zhǎng)'},
{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的開發(fā)中渊季，對(duì)列表?xiàng)l目的渲染并非是通過 div 來承載的，ionic 提供了列表專用的標(biāo)簽 ion-list
<ion-list>
<ion-item></ion-item>
</ion-list>
其中 ion-list 是列表容器罚渐， ion-item 是列表中的一個(gè)條目却汉，當(dāng)把 ion-item 和 ngFor 指令結(jié)合使用，就可以渲染出一個(gè)多條目的列表：
<ion-content>
<ion-list>
<ion-item *ngFor="let item of data">{{item.name}}</ion-item>
</ion-list>
</ion-content>
更復(fù)雜一些的列表
ion-item 里可以通過不同元素的組織讓列表承載更多信息
<ion-item *ngFor="let item of data">
<h2>{{item.name}}</h2>
<p>{{item.description}}</p>
</ion-item>
此外荷并，ionic還提供一個(gè)指令 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>
（注：漫威電影宇宙中超級(jí)英雄的出生年份不可考 :) ）
此處除了點(diǎn)運(yùn)算符(.) 輸出對(duì)象的屬性合砂，還使用了一個(gè)計(jì)算表達(dá)式和一個(gè)條件表達(dá)式，這些都是我們常見的用法源织。
加入頭像
利用 ion-avatar 標(biāo)簽和 item-start 指令渲染一個(gè)有頭像的列表：
ion-avatar標(biāo)簽的默認(rèn)樣式會(huì)自動(dòng)對(duì)圖片進(jìn)行縮放和截取既穆，呈現(xiàn)出如圖所示的圓形效果，此外也有一種可以展示方形圖片的 ion-thumbnail 標(biāo)簽（縮略圖標(biāo)簽）雀鹃，你也可以通過CSS來修改頭像的樣式幻工。
（注：我事先已經(jīng)準(zhǔn)備好了圖片素材并將每位hero的avatar屬性寫進(jìn)了data中。）
有條件地渲染：ngIf 指令
除了 ngFor 黎茎，還有一個(gè)非常常用的指令 ngIf 囊颅，通過一個(gè)表達(dá)式來判斷元素是否會(huì)被添加到模板中。這一指令同樣也是動(dòng)態(tài)的：當(dāng)表達(dá)式的值變?yōu)檎娓嫡埃乇銜?huì)添加踢代；當(dāng)表達(dá)式的值變?yōu)榧伲貢?huì)從模版中被移除嗅骄。
*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 不能放置在同一個(gè)標(biāo)簽上(Vue之類的框架則可以)溺森，因此在 ion-item 外加上一個(gè)“虛擬”的標(biāo)簽 ng-container, 它自身不會(huì)被渲染到DOM中慕爬，只會(huì)渲染它包裹的內(nèi)容（類似Vue中的 template 標(biāo)簽）窑眯。因此在沒有 ngIf 的情況下，把 ngFor 指令加在 ion-item 上和加在外層的 ng-container 標(biāo)簽上效果是等同的医窿；而在有 ngIf 指令的情況下磅甩，可以通過 ng-container標(biāo)簽避免兩個(gè)指令的沖突。
