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的更多相关文章

  1. 解决Java中There is no getter for property XXX'XXX' in 'class XXX'的问题

    当你出现There is no getter for property XXX'XXX' in 'class XXX'时, 就是在你的这个类中没有找到你这个属性. 检查两个地方 1.你的返回值类型是否 ...

  2. wpf/Silverlight/wp中如何绑定模板中的属性

    <Style TargetType="{x:Type TabItem}" x:Key="EditorTabItemStyle"> <Sette ...

  3. ListBox项模板中绑定ListBoxItem属性的方法

    原文:ListBox项模板中绑定ListBoxItem属性的方法 <ListBox> <ListBox.ItemTemplate> <DataTemplate> & ...

  4. WPF之通过EventTrigger修改模板中元素的属性

    前言:对于此操作,我只想说是微软的神经,还是我的笨蛋.为什么EventTrigger就不能像Trigger那样直接设置Property以及Value就对属性进行操作,而必须要放一个Action,而默认 ...

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

    访问模型中的属性或者是字典,可以通过{{params.property}}的形式,或者是使用{{params['age']}}这样的形式

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

    如何启用属性路由并描述属性路由的各种选项? Why Attribute Routing? Web API的第一个版本使用基于约定的路由.在这种类型的路由中,您可以定义一个或多个路由模板,这些模板基本上 ...

  7. SMARTY模板中如何使用get,post,request,cookies,session,server变量

    {$smarty}保留变量不需要从PHP脚本中分配,是可以在模板中直接访问的数组类型变量,通常被用于访问一些特殊的模板变量.例如,直接在模板中访问页面请求变量.获取访问模板时的时间戳.直接访问PHP中 ...

  8. Javascript中prototype属性详解

    在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...

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

    通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...

随机推荐

  1. java跨域

    在我们开发当中  经常会碰见跨域问题 今天我来说下 我在工作撞见的跨域: 一.首先我们要了解跨域存在的原因 1.浏览器限制 2.跨域(域名,端口不一样都是跨域) 3.XHR(XMLHttpReques ...

  2. pytest自动化2:测试用例setup和teardown

    前言: pytest支持函数和类两种用例方式,针对每种情况都有不同的代码 pytest用例运行级别 模块级(setup_module/teardown_module)开始于模块始末,全局的 函数级(s ...

  3. 修改VScode行号区的背景颜色

    vs code是相当不错的一个编辑器,现阶段我用来编写nim程序. vs code非常丧心病狂一点就是行号区和编辑区的背景颜色都是一样, 这样会导致要看行首有没有对齐会非常吃力.这个问题让我纠结了非常 ...

  4. 2.Servlet 请求、响应及重定向

    PS:以下仅为个人学习笔记,涩及方面略窄  #######################     Request     ####################### /** *    reque ...

  5. sdl2在vs2012上的配置

    网上关于sdl2的配置教程很多,我尽量将我遇到的问题分享给大家. 首先,打开VS2012: 2.点击新建项目:选择空项目,确定即可 (文件名,保存位置,解决方案名称,可以随便填,(我取名为sdlpla ...

  6. 2018-2019-2 网络对抗技术 20165326 Exp3 免杀原理与实践

    免杀原理与实践 目录 知识点问答 实践内容 遇到的问题 心得体会 知识点 meterpreter免杀 基础问题回答 杀软是如何检测出恶意代码的? 特征码(基于签名):模式匹配,比对特征码库 启发式:通 ...

  7. Linux 下使用umount强行卸载设备

    卸载NFS,结果出现无法卸载的情况 [root@localhost /]# umount /udisk/ umount: /udisk: device is busy umount: /udisk: ...

  8. vue--http请求的封装--token

    export const FetchHandler = function (url,opt) { let paramStr = ''; let token = ''; for(key in opt){ ...

  9. Echarts 一个开源图表设计工具

    一般来说,因有所需,方有所求.最近项目中有这方面的需求,用着感觉不错.特此记录!此处仅是一个简单的demo.官网地址:http://echarts.baidu.com/,相关文档.插件都有. 1.js ...

  10. Linux 安装aria2

    Ubuntu/Linux Mint/Debian sudo apt-get install aria2 CentOS/Fedora sudo yum install aria2 Manjaro/Arc ...