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. SharePoint Framework 基于团队的开发(四)

    博客地址:http://blog.csdn.net/FoxDave 确保代码一致性和质量 软件开发团队常常同项目的一致性和高质量做斗争.不同的开发者有不同的编码风格和偏好.在每个团队都有技术优秀的独立 ...

  2. PHP协程入门详解

    概念 咱们知道多进程和多线程是实现并发的有效方式.但多进程的上下文切换资源开销太大:多线程开销相比要小很多,也是现在主流的做法,但其的控制权在内核,从而使用户(程序员)失去了对代码的控制,而且线程的上 ...

  3. 前端测试时,常用SQL

    与后台联调页面,经常会验证数据正确性,这时候就需要会点SQL语句,以下是常用的SQL: 单表查询 select * from table 条件查询 select * from table where ...

  4. 使用RevoUninstaller Pro卸载

    使用RevoUninstaller Pro卸载opera浏览器,操作过的注册表 HKEY_CURRENT_USER\SOFTWARE\CLASSES\Local Settings\Mircrosoft ...

  5. 处理文件中的" M-BM- "特殊符号

    有时为了方便,会在Excel中进行代码拼装,比如说是建表SQL语句,但是在复制的代码过程中可能会带入不可见字符,造成代码无法运行. 本次代码中就需要了不可见的" M-BM- " 问 ...

  6. git-本地仓库和远程仓库关联

    以github为例: 在github创建仓库 本地新建项目后执行:git init 将远程项目和本地项目关联:git remote add origin +远程仓库地址 如:git remote ad ...

  7. python学习笔记-基础、语句、编码、迭代器

    #python的优缺点优点:Python简单优雅,尽量写容易看明白的代码,尽量写少的代码.缺点:第一个缺点就是运行速度慢,和C程序相比非常慢,因为Python是解释型语言,你的代码在执行时会一行一行地 ...

  8. PTA L2-4 关于堆的判断

    先上题面 链接 https://pintia.cn/problem-sets/994805046380707840/problems/994805064676261888 首先,题目描述的很清楚,这是 ...

  9. Mac os 下brew的安装与使用—— Homebrew

    1.简介 brew 全称Homebrew  是Mac OSX上的软件包管理工具,相当于linux下的apt-get. 2.安装 2.1安装ruby工具 2.1.1 ruby简介 2.1.2 检查rub ...

  10. Django 数据迁移

    在1.6之前, Django只支持添加新的model到数据库, 而无法编辑或修改已经存在的model. 在当时, 这些Django缺失的功能可以通过South实现. 1. 新的命令 Django 1. ...