AngularJS 2 Day6 Structure Directive

在前一篇當中我們介紹了四種DataBinding的方式

我們可以透過這些DataBinding的方式,將我們在TypeScript的變數

回傳到我們的 Templete當中來做顯示。

可是有些情況下,我們可能會根據各種不同的條件、情況來顯示不同的變數資料

這時候我們就必須要仰賴 Structure Directive了

Structure Directive

主要是會動態改變DOM結構,共有三種*ngIf*ngSwitch*ngFor

這三種Structure Directive相信大家應該都不陌生,就如同字面上的意思一樣,可以透過判斷式或是迴圈來將我們的資料進行篩選以及呈現。

而使用方式相當簡單,接下來我們將一一來做介紹。

首先在我們TS檔案當中,我們先新增一些內容來做後續供給 Structure Directive做使用。

我們創建了兩個變數,一個命名為 Role的變數 用來判斷我們當前的權限

另一個為list的變數,用來存放資料用

export class AppComponent  {

  constructor() { }
  list = [
  {
    "id": 1,
    "value": "項目一",
    "done" : true
  },
  {
    "id": 2,
    "value": "項目二",
    "done" : false
  },
  {
    "id": 3,
    "value": "項目三",
    "done" : true
  }
];

 Week = "星期一"
  
}

接著變數建立完後,我們就可以到我們Templete來將資料倒出來

*ngIf、*ngFor

這兩個directive 我放在一起講,因為很常會需要將兩者進行搭配

當我們想將陣列內的資料呈現在頁面上,但是又想根據某些條件才允許顯示

此時我們就會像以下的寫法:

<ul>
  <li *ngFor="let item of list >
    <label htmlFor="chk_{{item.id}}">
      <input id="chk_{{item.id}}" type="checkbox" [checked]="item.done" /> 
             {{item.value}}
    </label> |
    <span *ngIf="item.done">(已完成)</span>

  </li>
</ul>

利用*ngFor 將資料類似foreach的方式把每一筆的item取出來

我們就可以透過 item.欄位,將該筆物件資料給取出來了。

另外如果碰到像是條件成立的情況下要顯示字的話,我們就可以透過

*ngIf 來完成, 當引號內的內容為true時,就會執行該行,為false時則隱藏該行不顯示。

 

*ngSwitch

而當我們的變數內容可能為多個條件選項時,我們就可以採用 *ngSwitch

<div [ngSwitch]="Role">
 <span *ngSwitchCase="1"> 權限一才看得到 </span>
 <span *ngSwitchCase="2"> 權限二才看得到 </span>

</div>

如此一來就可以在畫面上進行條件篩選。

以上文章敘述如有錯誤及觀念不正確,請不吝嗇指教:)

有任何家教、案子 或技術相關問題 請都歡迎聯繫我

http://www.zhenghui.idv.tw/