屬性繫結簡單例子

css的選擇器都需要通過下面語法進行繫結:

<div [id] = "'box'">屬性繫結</div>
<!--通過變數繫結-->
<div [id] = tag>通過變數繫結</div>
<!--class繫結-->
<div [class] = "'myClass'">class繫結</div>
<!--多樣式繫結-->

<h3 [style] = "'color:red;width:300px'">多樣式繫結</h3>

變數區:

條件判斷測試

定義一個boolean變數

條件表示式使用*ngIf

if else

變數改為false
bool:boolean = false
使用下段程式碼測試 if else

<h3 *ngIf = "bool;else elseBlock">條件判斷測試</h3>
<ng-template #elseBlock>else測試</ng-template>

介面效果

成功起到了if else效果

迴圈

定義一個數組
colors:Array<string> = ['red','blue','yellow']
迴圈測試

<div *ngFor="let color of colors let i = index">
  {{i}}
  {{color}}
</div>

效果: