国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

lowett / 1017人閱讀

摘要:雷神上映已經一周,但因為各種原因還沒來得去送票房,有多年不見的班納和洛基娘娘,期待他們在諸神黃昏和明年無限戰爭中的表現。至此,準備就緒,開始了解第一個指令。參考文檔結構型指令

《雷神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 數組:


  
{{item}}

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

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:"綠巨人浩克"}
    ]; 

模板渲染:


  
{{item.name}}

ionic的列表渲染 基本使用

在APP的開發中,對列表條目的渲染并非是通過 div 來承載的,ionic 提供了列表專用的標簽 ion-list


  

其中 ion-list 是列表容器, ion-item 是列表中的一個條目,當把 ion-item 和 ngFor 指令結合使用,就可以渲染出一個多條目的列表:


  
    {{item.name}}
  

更復雜一些的列表

ion-item 里可以通過不同元素的組織讓列表承載更多信息


  

{{item.name}}

{{item.description}}

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


      

{{item.name}}

{{item.description}}

{{item.gender?"男":"女"}}, {{2017 - item.birthYear}} 歲

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

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

加入頭像

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

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

有條件地渲染:ngIf 指令

除了 ngFor ,還有一個非常常用的指令 ngIf ,通過一個表達式來判斷元素是否會被添加到模板中。這一指令同樣也是動態的:當表達式的值變為真,元素便會添加;當表達式的值變為假,元素會從模版中被移除。

*ngIf="isActive"

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


    
      
        
          
        
        

{{item.name}}

{{item.description}}

{{item.gender?"男":"女"}}, {{2017 - item.birthYear}} 歲

這兒要說明的是,在angular中,__ngFor 和 ngIf 不能放置在同一個標簽上__(Vue之類的框架則可以),因此在 ion-item 外加上一個“虛擬”的標簽 ng-container, 它自身不會被渲染到DOM中,只會渲染它包裹的內容(類似Vue中的 template 標簽)。因此在沒有 ngIf 的情況下,把 ngFor 指令加在 ion-item 上和加在外層的 ng-container 標簽上效果是等同的;__而在有 ngIf 指令的情況下,可以通過 ng-container標簽避免兩個指令的沖突__。

參考文檔

Angular結構型指令

Ionic List API Docs

Ionic Item API Docs

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/26136.html

相關文章

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<