1 新增詳情區域，元件的模板中有一個列表。要想點選列表中的一個英雄，並顯示該英雄的詳情，你需要在模板中留一個區域，用來顯示這些詳情

heroes.component.html

<h2>{{selectedHero.name | uppercase}} Details</h2>
<div><span>id: </span>{{selectedHero.id}}</div>
<div>
  <label>name:
    <input [(ngModel)]="selectedHero.name" placeholder="name"/>
  </label>
</div>
 

2 修改選中事件

heroes.component.html

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

3 增加選中事件的後臺程式碼

heroes.component.ts

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

4 開啟瀏覽器的console,發現有error

5 怎麼回事？

當應用啟動時，selectedHero 是 undefined，設計如此。
但模板中的繫結表示式引用了 selectedHero 的屬性（表示式為 {{selectedHero.name}}），這必然會失敗，因為你還沒選過英雄呢。

6 使用*ngIf來處理空的情況, 在div後面增加判斷

src/app/heroes/heroes.component.htm

<div *ngIf="selectedHero">

  <h2>{{selectedHero.name | uppercase}} Details</h2>
  <div><span>id: </span>{{selectedHero.id}}</div>
  <div>
    <label>name:
      <input [(ngModel)]="selectedHero.name" placeholder="name"/>
    </label>
  </div>

</div>
 

總結

• 英雄指南應用在一個主從檢視中顯示了英雄列表。

• 使用者可以選擇一個英雄，並檢視該英雄的詳情。

• 你使用 *ngFor 顯示了一個列表。

• 你使用 *ngIf 來根據條件包含或排除了一段 HTML。

• 你可以用 class 繫結來切換 CSS 的樣式類。