angular 指令渲染_Angular 界面元素的条件渲染

我有一个Angular list：

点击列表元素，我期望在明细区域看到点击元素对应的明细：

实现方式是，给li元素注册click事件响应函数：

语法为：

My Heroes

• {{everyhero.id}} {{everyhero.name}}

在Component里实现事件响应函数的代码：

定义selectedHero属性，用于维护当前选中的hero信息：

在明细页面里显示selectedHero的字段值：

{{selectedHero.name | uppercase}} Details

id: {{selectedHero.id}}

name:

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

Chrome开发者工具console标签页里报的错误：

ERROR TypeError: Cannot read property 'name' of undefined

问题的根源是，selectedHero这个property，在应用程序初始化时是undefined，因为当前用户尚未点击任何一个li元素。解决办法是使用 Angular的指令*ngIf进行条件渲染：

{{selectedHero.name | uppercase}} Details

id: {{selectedHero.id}}

name:

之后问题消失：

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