Angular 4 0 內建指令

原文出處：

在這篇文章中，我們將分別列舉每乙個內建指令的用法，並提供乙個例子作為演示。盡量用最少最簡單的描述，讓你在更快更準確地學會每一種內建指令的基本用法。

作用：像 for 迴圈一樣，可以重複的從陣列中取值並顯示出來。

例子：

// .ts
this.userinfo = ['張三', '李四', '王五'];
// .html
}

講解：他的語法是*ngfor="let username of userinfo"，其中 userinfo 是從中取值的陣列，username 是每次從中取出來的值。然後在這個標籤裡面的內容就會重複執行，並通過雙向繫結，將 username 顯示出來。

作用：根據條件決定是否顯示或隱藏這個元素。

例子：

// .html
b">

講解：永遠不會顯示

當 a 大於 b 的時候顯示

當 username 等於張三的時候顯示

根據 myfunction() 這個函式的返回值，決定是否顯示

作用：防止條件複雜的情況導致過多的使用 ngif。

例子：

// .html
age = 10
age = 20
age = 18

講解：[ngswitch] 先與目標進行繫結，ngswitchcase 列出每個可能性，ngswitchdefault 列出預設值。

作用：可以使用動態值給特定的 dom 元素設定 css 屬性。

例子：

// .ts backcolor: string = 'red'; // .html 你好，世界你好，世界你好，世界你好，世界

講解：直接設定顏色為 yellow。

設定背景顏色為 backcolor，並可以在 .ts 檔案中對 backcolor 的值進行修改。

設定字型大小，需要注意的是只寫 font-size 會報錯，必須在後面加上 .px。當然 .em .% 都是可以的。

前三種都是只設定乙個，寫 [ngstyle] 可以同時寫多個，使用花括號包住裡面的內功。需要注意的是連字元 -是不允許出現在物件的鍵名當中的，如果使用 background-color 等時需要加上單引號。

作用：動態地設定和改變乙個給定 dom 元素的 css類。

例子：

// .scss .bordered // .ts isbordered: boolean = true; // .html 是否顯示邊框

講解：

作用：告訴 angular 不要繫結頁面的某個部分。

例子：

.html
}

講解：使用了 ngnonbindable ，花括號就會被當做字串一起顯示出來。

日常開發中，用 ngfor 和 ngif 應該是最多的了，所以把他們兩個寫在了前面。至於 ngnonbindable，我實際開發中一次沒用過，也是查著資料測試一遍寫下來的。?