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

xa9qqrwz  于 2023-02-18  发布在  Java
关注(0)|答案(8)|浏览(174)

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

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

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

e3bfsja2

e3bfsja21#

这应该可以满足您的需要:

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

或更短

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

每个{}创建一个新的示例,不同对象示例的====比较总是得到false。当它们转换为字符串时,===结果为true
Plunker example

ghhkc1vu

ghhkc1vu2#

根据上述回答,以下措施不起作用或不太可取:

  • (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-将Object或Map转换为键值对数组。
?. -Angular 安全导航运算符(?.)是一种防止空值和未定义的流畅而方便的方法

演示:demo with angular 9, though it works for previous versions as well

iqjalb3h

iqjalb3h3#

你也可以这样说:

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

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

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

ui7jx7zq4#

上面的答案是好的。但我发现了一个非常好的选择使用以下视图:
{{先前的信息.标题}}
问题Angular2 - error if don't check if {{object.field}} exists可能重复

2uluyalo

2uluyalo5#

这对我很有效:
检查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,则下一个语句检查对象是否至少有一个比例。它不检查属性是否有值。

9ceoxa92

9ceoxa926#

稍微长一点的方式(如果感兴趣的话):
在您的打印脚本代码中执行以下操作:

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

在模板中:

ngIf="objectLength != 0"
bd1hkmkf

bd1hkmkf7#

为了可读性,创建了ngx-if-empty-or-has-items库,它会检查一个对象,集合,Map或数组是否不为空。也许它会帮助一些人。它有与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>
o0lyfsai

o0lyfsai8#

使用include语句验证对象既不是null也不是空集。

<div class="comeBack_up" *ngIf="!['null','{}'].includes(previous_info | json)">

相关问题