关于javascript:如何使用 *ngIf检查Angular2模板中的空对象

How to check empty object in angular 2 template using *ngIf

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

1
2
3
4
   <a
      [routerLink]="['Inside_group_page',{'name':previous_info.path | dotTodash }]"
      >
        {{previous_info.title}}

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


这应该是您想要的:

1
 

或更短

1
 

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

Plunker实例


您也可以使用类似的方法:

1
 

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

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


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

以前的_信息?标题}

可能是重复的问题角度2-如果不检查对象.field是否存在,则出错


这对我很有用:

检查length属性,使用?避免undefined错误。

所以你的例子是:

1
 

更新

长度属性只存在于数组中。因为问题是关于对象的,所以使用Object.getOwnPropertyNames(obj)从对象中获取属性数组。示例如下:

1
 0">

添加previous_info &&以检查对象是否存在。如果它的计算结果是true,那么下一条语句将检查对象是否至少具有适当的属性。它不检查属性是否有值。


稍微长一点(如果感兴趣的话):

在typescript代码中,执行以下操作:

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

然后在HTML文件中检查:

*ngif="对象长度!= 0


仅仅为了可读性而创建的库NGX如果为空或有项目,它将检查对象、集合、映射或数组是否不为空。也许它能帮助别人。它具有与ngif相同的功能(然后支持else和"as"语法)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
arrayOrObjWithData = ['1'] || {id: 1}

<h1 *ngxIfNotEmpty="arrayOrObjWithData">
  You will see it


 or
 // store the result of async pipe in variable
 <h1 *ngxIfNotEmpty="arrayOrObjWithData$ | async as obj">
  {{obj.id}}


 or

noData = [] || {}
<h1 *ngxIfHasItems="noData">
   You will NOT see it