Angular-結構語法

這邊要記錄的是ngIf以及ngFor、ngClass、ngStyle

ngIf:被標記的欄位,若是資料為true,則顯示,否則關閉

ngFor:依據資料跑回圈,把所有資料讀出來

以下二個個人認為只是屬性繫結的變形

ngClass:帶入Class

ngStyle:寫style


ngIf

html下法123為false,所以不顯示,456為true,所以會顯示

至於怎麼玩就看個人囉


ngFor

ngFor是在資料有多筆時,可以自動跑回圈的一個語法,來看看吧

html,右邊的let = i是在建立索引,不需要的話,分號後方的字可以去除

ts,在這邊宣告一個任意型別的陣列,陣列裡面寫入ID、Name的屬性

  data: any[]=[
      {ID:1,Name:"小菜鳥"},
      {ID:2,Name:"傑夫"}
    ]

 

顯示結果
 


如果資料中有包含html呢?

修改後的data,原本的寫法並無法印出div

因此在html中必須透過[innerHtml]把item的資料轉印出來


LINE討論群FB討論區

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

聯絡方式:
FaceBook
E-Mail