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>

之后问题消失：

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

Angular 界面元素的条件渲染相关推荐

Angular界面元素CSS样式的条件式施加方式
我有一个Angular列表,我期望在元素li被点击时,显示的外观和其他元素不一样.可以通过li被点击时,给该元素分配一个CSS样式的方式来实现. 定义一个selected CSS类: list当前元素 ...
web前端高级React - React从入门到进阶之React条件渲染
系列文章目录第一章:React从入门到进阶之初识React 第一章:React从入门到进阶之JSX简介第三章:React从入门到进阶之元素渲染第四章:React从入门到进阶之JSX虚拟DOM渲染 ...
angular条件渲染、列表渲染、属性绑定、样式绑定、事件绑定
文章目录属性绑定样式绑定绑定单一样式绑定多个样式用 NgStyle 设置内联样式类绑定绑定单个类样式绑定到多个 CSS 类用 NgClass 添加和删除类条件渲染列表渲染 *ng ...
Class绑定、Class对象绑定、v-if(条件渲染)、v-show(元素显示)、v-for（列表渲染）
Class绑定知识点 v-bind:class v-bind:class 为html标记绑定样式单class属性. <div id="myApp"><div v ...
angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例...
基本语法: 1.双向数据绑定 vue 指令:v-model="msg" react constructor(){this.state{msg:"双向数据绑定" ...
vue学习笔记1——v-if和templete 条件渲染使用 key 控制元素的可重用
在官网上看教程,根据教程记录一下笔记: 在进行条件渲染时,可使用 key 控制元素的可重用. 官网例子效果如下图: 点击按钮可进行切换. 具体的实现代码官网给出了,但是只是html的代码. 完整代码如 ...
Vue之概述、基本使用、data数据和if条件渲染
一.Vue概述 Vue.js是前端三大新框架:Angular.js.React.js.Vue.js之一,Vue.js目前的使用和关注程度在三大框架中稍微胜出,并且它的热度还在递增. Vue.js读音 ...
02-Vue基础之条件渲染和列表渲染
文章目录 01.条件渲染 1.1.v-if 使用场景 1.2.v-show使用场景 02.列表渲染 2.1.v-for的基本使用 2.2.v-for遍历时key的选择问题 01.条件渲染 Vue中的条 ...
前端MVC Vue2学习总结（四）——条件渲染、列表渲染、事件处理器
一.条件渲染 1.1.v-if 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块:  {{#if ok}}<h1> ...

Angular 界面元素的条件渲染

Angular 界面元素的条件渲染相关推荐

最新文章

热门文章