iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 3
1
Modern Web

用30天深入Angular 5的世界系列 第 3

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

本文同步發佈於:Claire's BLOG
延續上一篇的範例: 請按此下載.

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

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

   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' }
  ];

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

<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的事件

<li *ngFor="let hero of heroes" (click)="onSelect(hero)">

更多資訊有關於event-binding

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

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

<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;
}


上一篇
[新手教程-2] 創立Angular的元件
下一篇
[新手教程-4] Angular的主從元件開發
系列文
用30天深入Angular 5的世界31
0
mihuartuanr
iT邦新手 5 級 ‧ 2018-01-27 14:52:06

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

接著開啟app.component.html,該開啟heroes.component.html吧?

已修正,謝謝回報!

0
Damien Huang
iT邦新手 5 級 ‧ 2018-05-15 11:58:28

您好,為何在加入(click)="onSelect(hero)"後,點擊該li,我會一直顯示TYPE ERROR _co.onSelect is not a function這個錯誤,是不是有哪裡我該注意的卻沒注意到?

沒事,我瞭解了,謝謝

1
hepo
iT邦新手 5 級 ‧ 2019-04-24 13:46:32

你好
開啟src/app/heroes/heroes.component.ts,在li裡面增加click的事件
程式碼是否應修正為:

selectedHero: Hero;
onSelect(hero: Hero): void {
this.selectedHero = hero;
}

我要留言

立即登入留言