如何使用 \*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>

但是我的代码是错误的，最好的方法是什么？

原文由 user5738822 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这应该做你想要的：

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

或更短

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

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

Plunker 示例

原文由 Günter Zöchbauer 发布，翻译遵循 CC BY-SA 3.0 许可协议

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 进行演示，尽管它也适用于以前的版本

原文由 Sumit 发布，翻译遵循 CC BY-SA 4.0 许可协议