延續上一篇的範例: 請按此下載.
利用*ngFor來做迴圈顯示完整列表
首先開啟src/app/heroes/heroes.component.ts
設定一個變數heroes
01 02 03 04 05 06 07 08 09 10 11 12 | heroes: Hero[] = [ { id: 11, name: 'Mr. Nice' }, { id: 12, name: 'Narco' }, { id: 13, name: 'Bombasto' }, { id: 14, name: 'Celeritas' }, { id: 15, name: 'Magneta' }, { id: 16, name: 'RubberMan' }, { id: 17, name: 'Dynama' }, { id: 18, name: 'Dr IQ' }, { id: 19, name: 'Magma' }, { id: 20, name: 'Tornado' } ]; |
接著開啟app.component.html,利用*ngFor來迴圈式的顯示列表內容
1 2 3 4 5 | < ul class = "heroes" > < li * ngFor = "let hero of heroes" > < span class = "badge" >{{hero.id}}</ span > {{hero.name}} </ li > </ ul > |
這時網頁上就可以看到成果如下圖:
更多資訊有關於ngFor
使用(click)來設定觸發事件
開啟src/app/heroes/heroes.component.ts,在li裡面增加click的事件
1 | < li * ngFor = "let hero of heroes" (click)="onSelect(hero)"> |
在src/app/heroes/heroes.component.ts增加處理的函數
1 2 3 4 5 | selectedHero: Hero; onSelect(hero: Hero): void { this .selectedHero = hero; } |
以條件式去增加元件的類別
打開heroes.component.html,在li內增加 [class.要增加的類別名稱]=”條件式為true時增加”
1 2 3 4 5 | < li * ngFor = "let hero of heroes" [class.selected]="hero === selectedHero" (click)="onSelect(hero)"> < span class = "badge" >{{hero.id}}</ span > {{hero.name}} </ li > |
這樣當hero === selectedHero為真時,這個li就會被加上selected這個類別
接下來再到src/app/heroes/heroes.component.css設定該類別的CSS,就能突顯現在所選擇的是那一個了
.selected{
color:red;
}