NG-資料繫結

資料繫結是NG的重頭戲之一,透過多種資料繫結的方式,使NG在撰寫的時候能夠更靈活,在這篇來記錄一下資料繫結的幾種方法。

 


內嵌繫結

{{屬性名稱}}

可以在html中直接使用二個大括號來表示JS中的屬性

 

屬性繫結

[屬性名稱]="屬性名稱",[]內的屬性名稱,表示的是當前的物件中,所擁有的屬性

例如img就有alt屬性,因此可以使用[alt]="屬性名稱",若是使用NG所產生的元件,更可以將元件中的屬性這邊綁定

例如元件名稱為Man,裡面有屬性為Name,就可以用這種語法

<Man [Name]="屬性名稱"></Man>

 

事件繫結

(事件名稱)="函式名稱()"

平常寫的onclick,在這邊就會變成(click)="函式名稱()",簡單來說就是換個寫法的點擊事件而已XD

雙向繫結

[(ngModel)]='屬性名稱'

我覺得這個式NG的特色,一個被綁定屬性傳到類之中,會在觸發NG自己的機制,去修改相關的綁定資料。

是效能的殺手之一,使用時要注意,但也是很方便的寫法。

有另外一種綁定方式,就是在觸發時的參數帶物件($event)進去,透過$event.target.value即可取到值,再去對屬性再次綁定

 


LINE討論群FB討論區

歡迎您的加入,讓這個社群更加美好!

聯絡方式:
FaceBook
E-Mail