如何使用* ngIf检查角度2模板中的空对象

时间:2016-05-09 08:30:14

标签: javascript typescript angular

我想检查我的对象是否为空,不要渲染我的元素,这是我的代码:

<div class="comeBack_up" *ngIf="previous_info != {}">
   <a 
      [routerLink]="['Inside_group_page',{'name':previous_info.path | dotTodash }]"
      >
        {{previous_info.title}}
   </a>
</div>

但是我的代码错了,最好的方法是什么?

7 个答案:

答案 0 :(得分:73)

这应该做你想要的:

<div class="comeBack_up" *ngIf="(previous_info | json) != ({} | json)">

或更短

<div class="comeBack_up" *ngIf="(previous_info | json) != '{}'">

每个{}创建一个新实例,====不同对象实例的比较始终会生成false。将它们转换为字符串===后,结果为true

Plunker example

答案 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) != '{}'仅适用于{}空的情况,不适用于nullundefined情况
  • 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 = nullprevious_info = undefinedprevious_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