开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Angular2 ngfor:未定义不是对象

Angular2中的ngFor是一个内置的指令，用于在模板中循环遍历数组或对象的元素。它的语法类似于JavaScript中的for循环。

在使用ngFor时，如果未定义或传递给它的值不是一个对象，就会出现"未定义不是对象"的错误。这通常是因为ngFor期望接收一个数组或对象作为输入，以便进行迭代。

解决这个问题的方法有以下几种：

确保传递给ngFor的值是一个数组或对象。可以通过在组件中定义一个数组或对象，并将其绑定到ngFor指令中来实现。
在使用ngFor之前，先进行空值检查。可以使用*ngIf指令来检查值是否存在，如果不存在，则不渲染包含ngFor的元素。
使用安全导航操作符(?)来避免未定义的错误。在模板中使用安全导航操作符可以确保在访问属性或方法时不会出现未定义的错误。例如，可以使用*ngFor="let item of items?.array"来避免"未定义不是对象"的错误。

总结起来，解决"Angular2 ngFor:未定义不是对象"的方法是确保传递给ngFor的值是一个数组或对象，并进行空值检查或使用安全导航操作符来避免未定义的错误。

关于Angular2的ngFor指令的更多信息，可以参考腾讯云的Angular2文档：Angular2 ngFor指令

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

如何使用JavaScript为对象添加未定义属性

今天我们来聊聊一个非常实用的小技巧：如何在JavaScript中给对象添加不存在的属性。检查并添加对象属性有时候我们需要给一个对象添加新的属性，但是我们不确定这个属性是否已经存在。...我们来看一个简单的例子： const person = {} // 检查person对象中是否有name属性，如果没有，就添加一个name属性 if (!...如果person对象中没有name属性，我们就给它添加一个空对象。接着，我们可以放心地给name属性添加firstName和lastName属性了。...确保调用正确的hasOwnProperty方法需要注意的是，hasOwnProperty方法可以被对象本身覆盖。...这样我们就可以确保调用的是原始的hasOwnProperty方法，而不是被对象覆盖的版本。

1431 0

关于angular2路由激活状态时class设置

问题是这样的：上面的tabs各自对应一个路由，在后台这些tabs是由一个数组tabArray生成的，并不是写上去的，当用户点击左边的一个项目时，会push一个tab到tabArray中。...以上的内容都是比较容易实现的，难的是当点击x号的时候，要关闭当前路由，并激活一个tab的class(active) ，之前没有用到angular2的属性的时候，用的是js来实现的，可老是有bug出现。...之后用的是angular2中的 <li routerLinkActive="active0" *ngFor="let navbarTab of

6783 0

Angular2 @NgModule

@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码。一个模块内部可以包含组件、指令、管道，并且可以将它们的访问权限声明为公有，以使外部模块的组件可以访问和使用到它们。...模块是用来组织应用的，通过模块机制外部类库可以很方便的扩展应用，Angular2将许多常用功能都分配到一个个的模块中，如:FormModule、HttpModule、RouterModule。...（Angular2中没有模块级别的service，所有在NgModule中声明的Provider都是注册在根级别的Dependency Injector中） ---- 3.imports：导入其他...比如导入CommonModule后就可以使用NgIf、NgFor等指令。 ---- 4.exports：用来控制将哪些内部成员暴露给外部使用。

2.1K4 0

优雅地创建未定义类PHP对象

优雅地创建未定义类PHP对象在PHP中，如果没有事先准备好类，需要创建一个未定义类的对象，我们可以采用下面三种方式： new stdClass() new class{} (object)[] 首先是...你自己新创建的类并不是它的子类。但是用这个类模板可以创建一个自己未定义类的对象。当然，这个对象内部没有任何东西。...一般在参数对象中很常见。它创建出来的对象是可以带属性方法的。...数组强转方式生成的对象非常的直观好理解。如果只是属性对象的封装，使用这种方式会更加地优雅舒服。复杂的对象生成可以使用匿名类的方式进行生成。...比如一些ORM框架的插入、修改需要传入的是只包含属性的对象。这时候就可以使用上述的方法灵活地生成对象而不用完整的定义类模板了。

2.8K1 0

Angular 2 架构（下)

*ngFor 告诉 Angular...---- 服务(Services) Angular2中的服务是封装了某一特定功能，并且可以通过注入的方式供他人使用的独立模块。服务分为很多种，包括：值、函数，以及应用所需的特性。...console.error(msg); } warn(msg: any) { console.warn(msg); } } ---- 依赖注入控制反转（Inversion of Control，缩写为IoC），是面向对象编程中的一种设计原则...通过控制反转，对象在被创建的时候，由一个调控系统内所有对象的外界实体，将其所依赖的对象的引用传递给它。也可以说，依赖被注入到对象中。...在传统的开发模式中，调用者负责管理所有对象的依赖，循环依赖一直是梦魇，而在依赖注入模式中，这个管理权交给了注入器(Injector)，它在软件运行时负责依赖对象的替换，而不是在编译时。

2.2K2 0

Angular2 VS Angular4 深度对比：特性、性能

那么，本文将会对Angular2和Angular4进行深度对比，以便帮助大家更好的了解这两个版本。 Angular2 Angular2是在2015年底发布的。...但是，AtScript不是强制性的，开发人员仍然可以选择只使用纯JavaScript / ES5代码来构建Angular应用程序。...通过在DI库中提供基本信息（可以调用函数或创建类的实例来检查相关元数据），从而简化了对象实例的构建。通过提供注入注释，使得参数信息重写也变得简单。...根据需要，在一定范围内，一些类型的对象可以被调用和机械的重写。实例范围：增强的DI库是由实例范围控制器组成的，当与子注入器连同范围标识符一起使用时，会更加强大。...改进 *ngIf 和 *ngFor：模板绑定语法目前支持一些少量有帮助的更改。现在，开发人员已经可以使用if/else设计语法，并分配局部变量了。

8.7K2 0

Java-方法重载时调用未定义的对象属性

public class TestWayReload { int id; String name; String pwd; public TestWay...

5.5K1 0

Angular 2 中的绑定的方法在无限循环吗？

我在自己的Ionic 2项目中，使用卡片列出数据：卡片中有一个导航按钮，根据每项的数据生成连接打开百度地图，我是这样绑定的...console一直在输出原来这是Angular2在change detection cycle中不停的调用绑定的方法nav(item)。

3.8K4 0

angular5面试题_大数据面试题

angular2中有了Zone.js。...可以采用如下方式避免对于只用于展示的数据，使用单向绑定，而不是双向绑定； Angular的数据流是自顶而下，从父组件到子组件单向流动。单向数据流向保证了高效、可预测的变化检测。...NgFor应该伴随trackBy方程使用。否则，每次脏值检测过程中，NgFor会把列表里每一项都执行更新DOM操作。...Promise 和 Observable的区别首先新版本的anuglar是推荐使用Observable的(属于RxJS)，其次，对于Observable对象，可以使用.toPromise()转化为Promise...对象。

4.3K2 0

英文阅读 | range对象不是迭代器

导读：昨天写了一篇《为什么range不是迭代器？range到底是什么类型？》，它跟之前两篇关于迭代器的文章是一脉相承的，所以我就没再介绍迭代器是什么，以及它跟可迭代对象有啥差别。...到了展示 range 不是迭代器的时候，也是简单带过。这引起某个论坛的小伙伴说我没抓住重点。他是误会了。...我从头到尾所关心的重点就是两个问题：为什么 range 不是迭代器，range 是一种怎样的序列类型？...我基于这样的考虑：range 对象完全可以被设计成迭代器，如此仅仅会减少一些便利而已，并非是不能，所以怎么设计 range，这是一道选择题。然后，就要说到今天分享的这篇文章了。

7604 0

Angular 2 + 折腾记：(2)初步认识angular2，不一样的开发模式

---- 基础概念国内的官网--基础词汇表(又名计算机术语--angular2 & es6 & es7) 速查表:又名demo写法表,里面涵盖了很多写法，相当于一本小字典关于ng2的一堆为什么:...: 会判断item是否有a这个值，防止undefined或者null让视图渲染报错 ---- 最最最常用的内置指令样式绑定(ngClass) [ngClass]或者[ngStyle]:可以传递一个对象...，用来动态判断增加多个样式 [class.a]或者[style.font-size]:单一操作类或者某个行内样式数据遍历(*ngFor) *ngFor="let i of item; let index...= index": 可以用这个来遍历数组对象，let index = index意思是创建一个局部遍历把当前遍历的索引保存到你的自定义变量index 动态渲染(*ngIf) *ngIf="item"

6.2K2 0

为什么Java不是纯面向对象语言？

什么是纯面向对象语言？ --------- 纯面向对象语言或完全面向对象语言是指完全面向对象的语言，它支持或具有将程序内的所有内容视为对象的功能。...编程语言满足七种标准可以就可以称为纯粹的面向对象语言，他们是：封装/数据隐藏继承多态性抽象化所有预定义类型都是对象所有用户定义的类型都是对象对对象执行的所有操作必须仅通过对象公开的方法正是金九银十跳槽季...为什么Java不是纯面向对象语言？ --------- Java支持属性1,2,3,4和6但不支持上面给出的属性5和7....Java语言不是纯面向对象语言，因为它包含以下属性：原始数据类型例如对象 Smalltalk是一种“纯粹的”面向对象的编程语言，与Java和C++不同，因为作为对象的值和作为基本类型的值之间没有区别...因此，如果您不是用int Integer创建并对其执行任何数学运算，那么Java将仅使用基本类型int 。

1.1K4 0

Angular 2 版本的 ng-bootstrap 初体验

} } interface IAlert { id: number; type: string; message: string; } 在对应的 html 文件中添加 *ngFor...指令，绑定 alerts 数组： <ngb-alert [type]="alert.type"...ng-bootstrap 的例子小结实现 ng-bootstrap 的人还是原来做 angular-ui 的那些人，可以说配方还是原来的配方，但是这味道么就跟原来有很大的不同了，完全切换到了 Angular2

1.5K2 0

【开发指南】（三）认识ionic3

由于AngularJS 1.x版本在性能上已经很难有较大提升，后来微软和google联合推出了全新设计的基于TypeScript的Angular2，这是对于原始版本完全的重写。...等到angular2的更新到了一定版本，一些依赖库分属于2和3，为了便于版本的统一管理，直接跳到了angular4，其实angualr2和4两者的变化不算太多。相应的ionic2也同步升级到3。...，另外还有内置指令的更灵活化，其它变化不大，具体更新如下： Angular 4.0 新的版本下，改进 AOT 编译器，分离 animations 包，缩小生成后的代码量，运行更快，改进ngIf 和ngFor...@IonicPage装饰器 ionic2中导航器不是基于url的，如果想使用url访问就要通过DeepLinker来实现，这是比较麻烦的，而在新版本中可以通过@IonicPage装饰器来实现。

2.7K4 0

JS如何判断一个对象是空对象（不是null哈）

已知一个对象(Object)，如何判断是一个空对象，即{ }。...Object.keys图片如果key为symbol的话，object.keys拿到的长度仍旧为0JSON.stringify见上图，拿到的仍旧为"{}"，所以存在漏洞for-in循环图片如果对象设置不可枚举

1.2K3 0

02 - 并不是所有东西都是对象

const obj = { key: 'value' } 简而言之，不是原始类型的任何事物都是 Object，并且包括函数和数组。所有的功能都是对象？...此外，与对象不同，原始类型作为值本身存储为对象，后者作为参考存储，这在执行相等性检查时会产生影响。...，这就像其他对象一样。...这也解释了为什么在尝试将属性分配给原始类型时JavaScript不抱怨的原因，因为赋值是在该临时包装对象上完成的，而不是原始类型本身。...JavaScript有6种原始类型所有不是原始类型的东西都是对象函数只是对象的一种特殊类型函数可用于创建新对象字符串，布尔值和数字可以表示为原始类型，也可以表示为对象由于JavaScript

4401 0

Angular2 之 Animations

Angular2的动画系统赋予了制作各种动画效果的能力，致力于构建出与原生CSS动画性能相同的动画。 Angular2的动画主要是和@Component结合在了一起。...使用要点 Angular2的动画是使用模型驱动的方式在两个状态之间进行转换，是由状态和状态之间的转场效果所定义的。动画被定义在@Component元数据中。...template: ` <li *ngFor="let hero of heroes" (@flyInOut.start)="animationStarted($event)"...Concepts)[https://blog.thoughtram.io/angular/2016/09/16/angular-2-animation-important-concepts.html] (angular2

1.9K1 0

如何判断一个对象是不是一个空对象？

在JavaScript中，可以使用以下方法来判断一个对象是否为空对象： 1：使用Object.keys()方法：Object.keys()方法返回一个包含对象自身可枚举属性的数组。...通过判断该数组的长度，可以确定对象是否为空对象。...function isEmptyObject(obj) { return Object.keys(obj).length === 0; } const obj1 = {}; // 空对象 console.log...(obj2)); // 输出 false 2：使用JSON.stringify()方法：将对象转换为字符串，然后判断字符串是否为空。...(obj2)); // 输出 false 这两种方法都可以判断一个对象是否为空对象。

4734 0

Vuejs和其他前端框架的对比

简单来说，Virtual DOM是一个映射真实DOM的JavaScript对象，如果需要改变任何元素的状态，那么是先在Virtual DOM上进行改变，而不是直接改变真实的DOM。...add orders[ key ] = orders[ key ] + 1 || 1; this.setState( { orders } ); } 在Vue中，state对象并不是必须的...不过就算有这么多好处，但是相比Angular2，Vue还是有很多的不足： Angular2原生Form支持： Angular2原生的Form模块功能相当强大。...比如 list differ 算法中 Angular2 可以支持实现了Symbol.iterator的对象，而Vue只能支持Array。...除此以外，Angular2还有一些小功能比如检验模板的类型安全（即，模板里能在编译器保证没有引用model未定义的变量），不过AoT本身似乎还没有稳定，所以不能算优势。

3.8K11 0

Angular 2 + 折腾记：(3)初步了解服务及使用

前言不探究高深理论，只探究实际使用，有更好的写法或者经验请指出; 有些暂时没涉及到的知识我可能会顺着例子解释； ---- 什么是服务简言之：就是资源获取，以及通讯逻辑处理的地方； Angular2...this.authHttp.post(environment.baseUrl + 'VehicleFault/ClearFault', data); } // 这里的每个接口返回一个可观察的订阅对象...import { NgModule } from '@angular/core'; -- 内置 // 除了根模块用BrowserModule，其他一些模块需要用到一些内置指令(*ngIf,*ngFor

1.6K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭