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 example

Answer 2

你也可以使用类似的东西：

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

使用您的组件中定义的isEmptyObject方法：

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

Answer 3

以上答案没问题。但是我在视图中找到了一个非常好用的选项：

可能是重复的问题 Angular2 - error if don't check if {{object.field}} exists

Answer 4

这对我有用：

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

Answer 5

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

(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安全导航运算符（？。）是一种防止空值和未定义值的流畅便捷的方法

Answer 6

仅出于可读性考虑，创建了库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>

Answer 7

更长的方式（如果对此感兴趣的话）：

在您的打字稿代码中执行以下操作：

this.objectLength = Object.keys（this.previous_info）.length！= 0;

然后在html文件中检查：

* ngIf =“ objectLength！= 0

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

7 个答案: