ng-if检查数组是否为空

Question

我正在使用的API如果数组中没有项目则返回此值

items: []

如果数组中有项目,则返回类似的内容

items: [
  {
    name: 'Bla'
  }
]

在我的模板中,我相信我需要使用ng-if来显示/隐藏元素,具体取决于是否存在数据.

<p ng-if="post.capabilities.items"><strong>Topics</strong>: <span ng-repeat="topic in post.capabilities.items">{{topic.name}}</p>

然而,我可能完全偏离基础,因为这是我第一次在Angular工作,并且可能有更好的方法来做我想做的事情.

Answer 1

post.capabilities.items仍将被定义,因为它是一个空数组,如果你检查post.capabilities.items.length它应该工作正常,因为0是假的.

Answer 2

验证length数组的属性是否大于0:

<p ng-if="post.capabilities.items.length > 0">
   <strong>Topics</strong>: 
   <span ng-repeat="topic in post.capabilities.items">
     {{topic.name}}
   </span>
</p>

JavaScript中的数组(对象)是真值,因此即使数组为空,您的初始验证也会<p ng-if="post.capabilities.items">始终评估true.

Answer 3

要克服null/ undefined问题,请尝试使用?运算符检查存在:

<p ng-if="post?.capabilities?.items?.length > 0">

• 旁注,如果有人到这个页面寻找Ionic Framework答案,请确保使用*ngIf:

  <p *ngIf="post?.capabilities?.items?.length > 0">