Angular 界面元素的條件渲染

我有一個 Angular

list：

點選清單元素，我期望在明細區域看到點選元素對應的明細：

實作方式是，給li元素注冊click事件響應函數：

文法為：

<h2>My Heroes</h2>
<ul class="heroes">
    <li *ngFor="let everyhero of heroes" (click)="onSelect(everyhero)">
    <span class="badge">{{everyhero.id}}</span> {{everyhero.name}}
  </li>
</ul>      

在Component裡實作事件響應函數的代碼：

定義selectedHero屬性，用于維護目前選中的hero資訊：

在明細頁面裡顯示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>      

然而應用不能按照期望的工作：

Chrome開發者工具console标簽頁裡報的錯誤：

ERROR TypeError: Cannot read property ‘name’ of undefined

問題的根源是，selectedHero這個property，在應用程式初始化時是undefined，因為目前使用者尚未點選任何一個li元素。解決辦法是使用 Angular的指令*ngIf進行條件渲染：

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

之後問題消失：