在前一篇當中我們介紹了四種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>
如此一來就可以在畫面上進行條件篩選。
以上文章敘述如有錯誤及觀念不正確，請不吝嗇指教:)
有任何家教、案子 或技術相關問題 請都歡迎聯繫我