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