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属性引用引发异常.

angular在模板中使用属性引发Cannot read property 'xxx' of undefined

时间: 2024-12-14 04:35:58

angular在模板中使用属性引发Cannot read property 'xxx' of undefined的相关文章

解决Java中There is no getter for property XXX&#39;XXX&#39; in &#39;class XXX&#39;的问题

当你出现There is no getter for property XXX'XXX' in 'class XXX'时, 就是在你的这个类中没有找到你这个属性. 检查两个地方 1.你的返回值类型是否正确    就是class 类路径是否正确, 我这里设置了别名,如果你没有设置别名是需要写全路径的. 2.检查你#{}中的参数是否和你实体类中的字段相同,必须相同他才会识别到. 而且是区分大小写的,如果你大小写不对应也是找不到的. 解决Java中There is no getter for prop

http请求头中的Content-Type属性在angular 和 node中的用法

post请求的请求体有以下两种格式: 1. 字符串: 'name=code_bunny&age=12' 这种格式的请求体,需要配置请求头 'Content-Type':'application/x-www-form-urlencoded' 2. json: {name:'code_bunny',age:12} 这种格式的请求体,需要配置请求头 'Content-Type':'application/json;charset=UTF-8' 注意: 请求体格式和请求头的Content-Type类型必

flask学习(十):模板中访问模型和字典的属性

访问模型中的属性或者是字典,可以通过{{params.property}}的形式,或者是使用{{params['age']}}这样的形式 原文地址:https://www.cnblogs.com/cnhkzyy/p/9690688.html

Angular 2 模板语法与常用指令简介

一.模板语法简介 插值表达式 <div>Hello {{name}}</div> 等价于 <div [textContent]="interpolate(['Hello'], [name])"></div> 模板表达式 1.属性绑定 1.1输入属性的值为常量 <show-title title="Some Title"></show-title> 等价于 <show-title [titl

走进AngularJs(二) ng模板中常用指令的使用方式

通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板开始入手是个不错方式,因为这部分内容相对简单好理解,而且是视图层的东西,大家都喜欢可以立马看得见的东西嘛.本篇我将搜罗模板中的常用指令一一测试,了解其使用方法,有点像背单词的感觉,会比较枯燥.不过对于初学,这样的枯燥是必须要经历的,开始~ 一.模板中可使用的东西及表达式 模板中可以使用的东西包括以下

Angular - Templates(模板)

点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ 在Angular中,模板是一个包含了Angular特定元素和属性的HTML.Angular结合模板.控制器和模型(model)的信息,动态的呈现一个界面给用户. 有以下几种类型的元素你可以在模板中使用: 1.Directive 指令 -- 可以作为一个DOM元素的扩展或者作为一个DOM元素的属性存在与模板当中. 2.Markup标签  --  比如双花括号{{表达式}}就是一个Angu

ASP.NET Web API 2中的属性路由(Attribute Routing)

如何启用属性路由并描述属性路由的各种选项? Why Attribute Routing? Web API的第一个版本使用基于约定的路由.在这种类型的路由中,您可以定义一个或多个路由模板,这些模板基本上是参数化字符串.当框架收到请求时,它会将URI与路由模板进行匹配. 基于约定的路由的一个优点是模板在单个位置定义,并且路由规则在所有控制器上一致地应用.遗憾的是,基于约定的路由使得很难支持RESTful API中常见的某些URI模式.例如,资源通常包含子资源:客户有订单,电影有演员,书有作者,等等.

CI模板中php脚本的使用

今天偶然发现,在CI的模板中能够直接使用CI自带的函数,并且可以直接调用controller里面的属性.案例: 控制器: public function test(){ $this->a = 'aaa'; $this->load->view('member/test',$data); } 模板: <?php var_dump($this->a);?> <?php echo base_url();?><br> <?php echo $this

spring整合velocity 配置文件中的属性

spring整合velocity 配置文件中的相关属性 1 <bean id= "viewResolver" class= "org.springframework.web.servlet.view.velocity.VelocityViewResolver" > 2 <!-- 是否缓存模板 --> 3 <property name ="cache" value="false" /> 4 5