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

Question

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

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

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

Answer 1

这应该做你想要的:

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

或更短

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

每个都{}创建一个新实例,并且====总是导致不同对象实例的比较false.当它们转换为字符串===结果时true

Plunker的例子

Answer 2

你也可以使用这样的东西:

<div class="comeBack_up" *ngIf="isEmptyObject(previous_info)"  >

使用isEmptyObject组件中定义的方法:

isEmptyObject(obj) {
  return (obj && (Object.keys(obj).length === 0));
}

Answer 3

以上答案都可以.但我发现在视图中使用以下选项非常好:

{{previous_info？.title伪}}

可能是重复的问题 Angular2 - 如果不检查{{object.field}}是否存在则会出错

Answer 4

从以上答案来看，以下方法无效或不太可取：

• (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));
  }
  

解决方案： 键值管道以及？。（安全导航操作员）；看起来很简单。

当previous_info = null或previous_info = undefined或previous_info = {}视为虚假值时，它可以很好地工作。

<div  *ngIf="(previous_info | keyvalue)?.length">

keyvalue-将Object或Map转换为键值对数组。

？-Angular安全导航运算符（？。）是防止null和undefined的一种流畅便捷的方法

Answer 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下一条语句，则检查对象是否至少按比例。它不检查该属性是否具有值。