如何使用 *ngIf 检查 Angular 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

根据上述答案，以下内容不起作用或不太可取：

• (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 的流畅且方便的方法

演示： 使用 angular 9 进行演示，尽管它也适用于以前的版本

Answer 3

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

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

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

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

Answer 4

上面的答案都可以。 但我发现了一个非常好的选项，可以在视图中使用以下内容：

{{previous_info?.title}}

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

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

Answer 6

有点长的方式（如果有兴趣的话）：

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

this.objectLength = Object.keys(this.previous_info).length != 0;

在模板中：

ngIf="objectLength != 0"

Answer 7

只是为了可读性，创建库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>