angular2在模板中使用属性引发Cannot read property 'xxx' of undefined
angular在模板中使用属性引发Cannot read property 'xxx' of undefined
在使用ng2的过程中,发现模板中如下方式
<li *ngFor="let item of model">
{{item.name}}
</li>
不会又任何问题.
如果是一下未使用结构指令方式,直接使用组件的属性
<li >
{{model.name}}
</li>
就会报错null错误,一开始百思不得其解,后来搞明白,model是异步请求获取的数据,在定义的时候let mode:any 时是属于unde值,而这时组件模板已经开始渲染了,也就会引发异常,知道原因,这就好办了,又两种方式可以处理:
1.定义组件属性的时候初始化对象: let mode:any={};
2.在模板中使用ngIf指令:<li *ngIf="model">{{model.name}} </li>
以上两种方式均能保证组件模板在第一次初始化时不会因为null属性引用引发异常.
angular2在模板中使用属性引发Cannot read property 'xxx' of undefined的更多相关文章
- 解决Java中There is no getter for property XXX'XXX' in 'class XXX'的问题
当你出现There is no getter for property XXX'XXX' in 'class XXX'时, 就是在你的这个类中没有找到你这个属性. 检查两个地方 1.你的返回值类型是否 ...
- wpf/Silverlight/wp中如何绑定模板中的属性
<Style TargetType="{x:Type TabItem}" x:Key="EditorTabItemStyle"> <Sette ...
- ListBox项模板中绑定ListBoxItem属性的方法
原文:ListBox项模板中绑定ListBoxItem属性的方法 <ListBox> <ListBox.ItemTemplate> <DataTemplate> & ...
- WPF之通过EventTrigger修改模板中元素的属性
前言:对于此操作,我只想说是微软的神经,还是我的笨蛋.为什么EventTrigger就不能像Trigger那样直接设置Property以及Value就对属性进行操作,而必须要放一个Action,而默认 ...
- flask学习(十):模板中访问模型和字典的属性
访问模型中的属性或者是字典,可以通过{{params.property}}的形式,或者是使用{{params['age']}}这样的形式
- ASP.NET Web API 2中的属性路由(Attribute Routing)
如何启用属性路由并描述属性路由的各种选项? Why Attribute Routing? Web API的第一个版本使用基于约定的路由.在这种类型的路由中,您可以定义一个或多个路由模板,这些模板基本上 ...
- SMARTY模板中如何使用get,post,request,cookies,session,server变量
{$smarty}保留变量不需要从PHP脚本中分配,是可以在模板中直接访问的数组类型变量,通常被用于访问一些特殊的模板变量.例如,直接在模板中访问页面请求变量.获取访问模板时的时间戳.直接访问PHP中 ...
- Javascript中prototype属性详解
在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...
- 走进AngularJs(二) ng模板中常用指令的使用方式
通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...
随机推荐
- YYY0.1YYY
XXX0.2XXXZZZ目前提供免费下载和自动更新功能,由于自己的时间有限,就我一个开发,后期持续更新在线听歌.mp4转mp3.高音质下载.全球dj网站免费下载功能!ZZZ
- 页面制作学习笔记:D1.概述
一.Web发展历史 Web1.0 :早期HTML页面:例:网易的门户网站163.com. Web2.0:AJAX技术规模应用:例:网易邮箱126.com. Web3.0:HTML5技术规模应用:例:网 ...
- 20175224 2018-2019-2 《Java程序设计》第八周学习总结
教材学习内容总结 第十五章 泛型与集合框架 泛型 泛型:目的为建立具有类型安全的集合框架. 泛型类声明:class People<E> class 名称<泛型列表> 链表 定义 ...
- Vue源码之 Vue的生命周期
天地初开就是new Vue(options),里面就一句话 this._init(options); (Vue.prototype.init 的赋值在initMixin(Vue)方法里) _init方 ...
- php的array数组 -------方法foreach循环时候,利用数组里值的引用地址(& )从而改变数组里的值
/* * 把每个数组值后面都加个SQL然后返回数组 * foreach循环时候,直接用引用(&)的方式就能改变之前的数组 */public function array_foreach(){ ...
- 2017年4月28日16:40:40 log
//TODO order CreateOrderServiceHandler generateManagementCustomer 子活动名称和uid
- top和nvidia-smi无法显示占用GPU的PID问题
通过nvidia-smi查看显卡使用情况,发现显卡在被占用,但是却没有提示占用显卡的进程id, 这时可以输入 fuser -v /dev/nvidia* 可以查看到, 再利用sudo kill -9 ...
- Android Tools&Cmd
1. 生成Keystore文件 keytool -genkey -v -keystore /Users/shiyantao/Desktop/xxx.keystore -alias aliasName ...
- header头 下载文件 参数详解
header( header( header( header( header( header( header( header( header( //2 浏览器不会响应缓存 //1 Public指示响应 ...
- PSP耗时