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

时间:2022-09-26 11:57:09

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&&num;39&semi;XXX&&num;39&semi; in &&num;39&semi;class XXX&&num;39&semi;的问题

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

  2. wpf&sol;Silverlight&sol;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学习&lpar;十&rpar;:模板中访问模型和字典的属性

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

  6. ASP&period;NET Web API 2中的属性路由&lpar;Attribute Routing&rpar;

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

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

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

  8. Javascript中prototype属性详解

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

  9. 走进AngularJs&lpar;二&rpar; ng模板中常用指令的使用方式

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

随机推荐

  1. Hadoop的体系结构

    HDFS和MapReduce是Hadoop的两大核心.而整个Hadoop的体系结构主要是通过HDFS来实现对分布式存储的底层支持的,并且它会通过MapReduce来实现对分布式并行任务处理的程序支持. ...

  2. java 线程池ThreadPoolExecutor 如何与 AsyncTask&lpar;&rpar; 组合使用。

    转载请声明出处谢谢!http://www.cnblogs.com/linguanh/ 这里主要使用Executors中的4种静态创建线程池实例方法中的 newFixedThreadPool()来举例讲 ...

  3. NPM 与 left-pad 事件:我们是不是早已忘记该如何好好地编程?

    转自:http://www.techug.com/npm-left-pad-have-we-forgotten-how-to-program 开发者朋友们,我们该谈一谈这个问题了.你们应该知道本周的  ...

  4. leetcode 122&period; Best Time to Buy and Sell Stock II ----- java

    Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...

  5. 【递归】油桶问题dp

    问题 : [递归]油桶问题 题目描述 楚继光扬扬得意道:“当日华山论剑,先是他用黯然销魂掌破了我的七十二路空明拳,然后我改打降龙十八掌,却不防他伸开食指和中指,竟是六脉神剑,又胜我一筹.可见天下武学彼 ...

  6. 【HDOJ】1429 胜利大逃亡&lpar;续&rpar;

    BFS+状态压缩,做了很多状态压缩了.今晚把八数码问题给搞定了. #include <iostream> #include <queue> #include <cstri ...

  7. jquery技巧小结

    由于主要还是负责后端,所以前端很多东西都不熟悉,jQuery作为web开发必备技能,有很多知识点,老是记不清楚,所以在这边整理一下. 1.加载页面后执行 $(function(){ //程序段 }) ...

  8. JavaScript 基本数据类型和引用类型的区别详解

    js基本数据类型: js基本数据类型包括:undefined,null,number,boolean,string.基本数据类型是按值访问的,就是说我们可以操作保存在变量中的实际的值 1. 基本数据类 ...

  9. Linux安装face&lowbar;recgnition

    Ubuntu 3:apt-get install python3.6-dev 4:pip3 install face_recgnition 5:  pip3 install opencv-python ...

  10. 微信小程序开发——使用回调函数出现异常:TypeError&colon; Cannot read property &&num;39&semi;setData&&num;39&semi; of undefined

    关键技术点: 作用域问题——回调函数中的作用域已经脱离了调用函数了,因此需要在回调函数外边把this赋给一个新的变量才可以了. 业务需求: 微信小程序开发,业务逻辑需要,需要把获取手机号码的业务逻辑作 ...