Angular 界面元素的条件渲染<span class="badge">{{everyhero.id}}</span>

我有一个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>

之后问题消失：

要获取更多Jerry的原创文章，请关注公众号"汪子熙":