我想检查我的对象是否为空,不要渲染我的元素,这是我的代码:
<div class="comeBack_up" *ngIf="previous_info != {}">
<a
[routerLink]="['Inside_group_page',{'name':previous_info.path | dotTodash }]"
>
{{previous_info.title}}
</a>
</div>
但是我的代码错了,最好的方法是什么?
答案 0 :(得分:73)
这应该做你想要的:
<div class="comeBack_up" *ngIf="(previous_info | json) != ({} | json)">
或更短
<div class="comeBack_up" *ngIf="(previous_info | json) != '{}'">
每个{}
创建一个新实例,====
不同对象实例的比较始终会生成false
。将它们转换为字符串===
后,结果为true
答案 1 :(得分:28)
你也可以使用类似的东西:
<div class="comeBack_up" *ngIf="isEmptyObject(previous_info)" >
使用您的组件中定义的isEmptyObject
方法:
isEmptyObject(obj) {
return (obj && (Object.keys(obj).length === 0));
}
答案 2 :(得分:11)
以上答案没问题。但是我在视图中找到了一个非常好用的选项:
{{previous_info?.title伪}}
可能是重复的问题 Angular2 - error if don't check if {{object.field}} exists
答案 3 :(得分:5)
这对我有用:
检查length
属性并使用?
以避免undefined
错误。
所以你的例子是:
<div class="comeBack_up" *ngIf="previous_info?.length">
<强>更新强>
length属性仅存在于数组中。由于问题是关于对象,使用Object.getOwnPropertyNames(obj)
从对象获取属性数组。示例变为:
<div class="comeBack_up" *ngIf="previous_info && Object.getOwnPropertyNames(previous_info).length > 0">
添加previous_info &&
以检查对象是否存在。如果它的计算结果为true
,则下一个语句将检查对象是否至少具有比例。它不会检查属性是否有值。
答案 4 :(得分:1)
从以上答案来看,以下方法无效或不太可取:
(previous_info | json) != '{}'
仅适用于{}
空的情况,不适用于null
或undefined
情况Object.getOwnPropertyNames(previous_info).length
也不起作用,因为模板中无法访问Object
this.objectLength = Object.keys(this.previous_info).length !=0;
我不想创建专用功能
isEmptyObject(obj) {
return (obj && (Object.keys(obj).length === 0));
}
解决方案::keyvalue管道与?.(安全导航操作符)一起使用;看起来很简单。
当previous_info = null
或previous_info = undefined
或previous_info = {}
时效果很好,并且被视为虚假值。
<div *ngIf="(previous_info | keyvalue)?.length">
keyvalue-将对象或映射转换为键值对数组。
?.-Angular安全导航运算符(?。)是一种防止空值和未定义值的流畅便捷的方法
答案 5 :(得分:0)
仅出于可读性考虑,创建了库ngx-if-empty-or-has-items,它将检查对象,集合,映射或数组是否为空。也许会帮助别人。它具有与ngIf相同的功能(然后,支持else和'as'语法)。
arrayOrObjWithData = ['1'] || {id: 1}
<h1 *ngxIfNotEmpty="arrayOrObjWithData">
You will see it
</h1>
or
// store the result of async pipe in variable
<h1 *ngxIfNotEmpty="arrayOrObjWithData$ | async as obj">
{{obj.id}}
</h1>
or
noData = [] || {}
<h1 *ngxIfHasItems="noData">
You will NOT see it
</h1>
答案 6 :(得分:0)
更长的方式(如果对此感兴趣的话):
在您的打字稿代码中执行以下操作:
this.objectLength = Object.keys(this.previous_info).length!= 0;
然后在html文件中检查:
* ngIf =“ objectLength!= 0