提问人：tekstrand 提问时间：1/27/2016 更新时间：11/17/2023 访问量：240942
ng-if 检查数组是否为空
ng-if check if array is empty
问：
如果数组中没有项目，我正在使用的 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 中工作，并且可能有更好的方法来完成我正在尝试做的事情。
答：
128赞
Martijn Welker
1/27/2016
#1
post.capabilities.items仍然会被定义，因为它是一个空数组，如果你检查它应该可以正常工作，因为它是错误的。post.capabilities.items.length0
54赞
Dmitri Pavlutin
1/27/2016
#2
验证数组的属性是否大于：length0
<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
评论
2赞
Dai
2/26/2018
不幸的是，如果数组是或 - 我收到运行时错误，这不起作用。nullundefined
0赞
ishallwin
5/17/2018
@Dai 你有没有想出一个空数组的方法？
1赞
codemonkey
6/7/2018
正如公认的答案所指出的，只需使用： ng-if=“post.capabilities.items.length” 然后 null、undefined 和 0 length 的计算结果都为 false。
39赞
Grant
5/22/2018
#3
要克服 / 问题，请尝试使用运算符检查是否存在：nullundefined?
<p ng-if="post?.capabilities?.items?.length > 0">
旁注，如果有人进入此页面寻找 Ionic Framework 答案，请确保您使用：
*ngIf<p *ngIf="post?.capabilities?.items?.length > 0">
0赞
Daniel Xav De Oliveira
6/3/2020
#4
根据我的经验，在 HTML 模板上执行此操作被证明是困难的，因此我决定使用事件来调用 TS 上的函数，然后检查条件。如果 true make 条件等于 true，然后在 HTML 上的 ngIf 上使用该变量
emptyClause(array:any) {
if (array.length === 0) {
// array empty or does not exist
this.emptyMessage=false;
}else{
this.emptyMessage=true;
}
}
[HTML全文]
<div class="row">
<form>
<div class="col-md-1 col-sm-1 col-xs-1"></div>
<div class="col-md-10 col-sm-10 col-xs-10">
<div [hidden]="emptyMessage" class="alert alert-danger">
No Clauses Have Been Identified For the Search Criteria
</div>
</div>
<div class="col-md-1 col-sm-1 col-xs-1"></div>
</form>
1赞
omar mahjoubi
11/17/2023
#5
这是解决方案：
<div *ngIf="post.capabilities.items.length > 0 && post.capabilities.items[0] !== '' "> ..... </div>检查 post.capabilities.items 的长度是否大于零，并确保数组中的第一项不是空字符串。这可确保仅当有可用的 post.capabilities.items 并且列表中的第一项不是空字符串时才显示内容。
下一个：ng-if 检查数组是否为空
评论