我想检查我的对象是否为空,不要渲染我的元素,这是我的代码:
<div class="comeBack_up" *ngIf="previous_info != {}">
<a [routerLink]="['Inside_group_page',{'name':previous_info.path | dotTodash }]">
{{ previous_info.title }}
</a>
</div>
但是我的代码是错误的,最好的方法是什么?
我想检查我的对象是否为空,不要渲染我的元素,这是我的代码:
<div class="comeBack_up" *ngIf="previous_info != {}">
<a [routerLink]="['Inside_group_page',{'name':previous_info.path | dotTodash }]">
{{ previous_info.title }}
</a>
</div>
但是我的代码是错误的,最好的方法是什么?
8条答案
按热度按时间e3bfsja21#
这应该可以满足您的需要:
或更短
每个
{}
创建一个新的示例,不同对象示例的====
比较总是得到false
。当它们转换为字符串时,===
结果为true
Plunker example
ghhkc1vu2#
根据上述回答,以下措施不起作用或不太可取:
(previous_info | json) != '{}'
仅适用于{}
空情况,不适用于null
或undefined
情况Object.getOwnPropertyNames(previous_info).length
也不起作用,因为在模板中无法访问Object
this.objectLength = Object.keys(this.previous_info).length !=0;
解决方案:keyvalue管道沿着?.(安全导航操作员);而且看起来很简单。
当
previous_info = null
或previous_info = undefined
或previous_info = {}
时,它工作良好,并被视为假值。keyvalue-将Object或Map转换为键值对数组。
?. -Angular 安全导航运算符(?.)是一种防止空值和未定义的流畅而方便的方法
演示:demo with angular 9, though it works for previous versions as well
iqjalb3h3#
你也可以这样说:
使用组件中定义的
isEmptyObject
方法:ui7jx7zq4#
上面的答案是好的。但我发现了一个非常好的选择使用以下视图:
{{先前的信息.标题}}
问题Angular2 - error if don't check if {{object.field}} exists可能重复
2uluyalo5#
这对我很有效:
检查
length
属性并使用?
以避免undefined
错误。你的例子是:
length属性只存在于数组中。因为问题是关于对象的,所以使用
Object.getOwnPropertyNames(obj)
从对象中获取属性数组。示例变为:添加
previous_info &&
是为了检查对象是否存在。如果它的值为true
,则下一个语句检查对象是否至少有一个比例。它不检查属性是否有值。9ceoxa926#
稍微长一点的方式(如果感兴趣的话):
在您的打印脚本代码中执行以下操作:
在模板中:
bd1hkmkf7#
为了可读性,创建了ngx-if-empty-or-has-items库,它会检查一个对象,集合,Map或数组是否不为空。也许它会帮助一些人。它有与ngIf相同的功能(然后,else和'as'语法被支持)。
o0lyfsai8#
使用include语句验证对象既不是null也不是空集。