[新手教程-3] 使用Angular的迴圈及判斷式等功能

延續上一篇的範例: 請按此下載.

利用*ngFor來做迴圈顯示完整列表

首先開啟src/app/heroes/heroes.component.ts
設定一個變數heroes

接著開啟app.component.html,利用*ngFor來迴圈式的顯示列表內容

這時網頁上就可以看到成果如下圖:

更多資訊有關於ngFor

使用(click)來設定觸發事件

開啟src/app/heroes/heroes.component.ts,在li裡面增加click的事件

在src/app/heroes/heroes.component.ts增加處理的函數

更多資訊有關於event-binding

以條件式去增加元件的類別

打開heroes.component.html,在li內增加 [class.要增加的類別名稱]=”條件式為true時增加”

這樣當hero === selectedHero為真時,這個li就會被加上selected這個類別
接下來再到src/app/heroes/heroes.component.css設定該類別的CSS,就能突顯現在所選擇的是那一個了
[code lang=”css”].selected{
color:red;
}

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *