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. Intellij idea 2018的注册方式

    激活方式:License Server 第一步: 将地址 http://active.chinapyg.com/ 或者 http://idea.toocruel.net 任意一个复制到License ...

  2. IntelliJ IDEA 使用教程(2019图文版) -- 从入门到上瘾

    IntelliJ IDEA 使用教程(2019图文版) -- 从入门到上瘾   前言:IntelliJ IDEA 如果说IntelliJ IDEA是一款现代化智能开发工具的话,Eclipse则称得上是 ...

  3. RedLock.Net - 基于Redis分布式锁的开源实现

    工作中,经常会遇到分布式环境中资源访问冲突问题,比如商城的库存数量处理,或者某个事件的原子性操作,都需要确保某个时间段内只有一个线程在访问或处理资源. 因此现在网上也有很多的分布式锁的解决方案,有数据 ...

  4. 利用Excel-Vba进行多表汇总和数据透视表

    汇总表格式 详情表格式 要求根据汇总表中的信息,到详情表中查找详细物料的具体个数 最终,对物料的个数进行汇总,结果如下图: ExcelVba代码如下(有一些注释代码供参考) Sub Start() S ...

  5. 通过SSH去连接 github 和bitbucket

    github 和 bitbucket 都是项目托管服务器, 1 创建SSH private key and public key 首先需要安装git命令, 并且请检查是否有ssh 命令. 打开 Git ...

  6. python学习-迭代器,列表解析和列表生成式

    迭代器为类序列对象提供了一个类序列的接口.Python 的迭代无缝的支持序列对象,而且还允许程序猿迭代非序列类型,包括用户定义的对象. 迭代器是一个next()方法的对象,而不是通过索引计数.当需要下 ...

  7. Hadoop学习------Hadoop安装方式之(三):分布式部署

    这里为了方便直接将单机部署过的虚拟机直接克隆,当然也可以不这样做,一个个手工部署. 创建完整克隆——>下一步——>安装位置.等待一段时间即可. 我这边用了三台虚拟机,分别起名master, ...

  8. Wpf binging(一) 基础

    1.C# 代码后台绑定 分别步骤为 1. 准备数据源 2.实例化 binging对象   以及设置 该对象的 数据源 和数据源的访问路径(也就是该数据源的什么属性绑定) 3. 把前端ui控件的 Tex ...

  9. ES6参数默认值

    参数默认值 1.首先,来看一下es5中的函数默认值 var a = a || 10; var b = b || "none" // 当a的值或者b的值为undefined时,根据逻 ...

  10. 微信小程序 数据库指引 前端操纵数据库失败

    把注释解开后,点击添加显示失败了 看了下注解,发现是数据库权限问题, 修改一下成第一个,然后点击又失败了,多点击几下,就会成功! 哦 别忘了时刻 ctrl +s 保存,如果你习惯了idea 自动保存的 ...