AngularJS ng-if数组长度为0时不显示问题求助

嘿，我来帮你搞定这个小问题！结合你说的情况——数组长度大于0能正常显示，为空时没动静，大概率是空数组的条件判断没处理好边界情况，下面给你列几个最常见的原因和解决办法：

1. 数组未初始化，导致length读取报错 #

如果你的数组在控制器里还没被赋值（比如一开始是undefined或者null，不是空数组[]），那模板里写myArray.length === 0的时候，会直接抛出「无法读取undefined的length属性」的错误，这个条件自然永远不成立，所以“为空”就不会显示。

解决办法：先判断数组是否存在，再检查长度 #

把你的两个ng-if条件修改成安全的写法：

<!-- 第5行：先确认数组存在，再判断长度大于0 -->
<div ng-if="myArray && myArray.length > 0">长度: {{myArray.length}}</div>
<!-- 第9行：数组不存在 或者 长度为0时显示 -->
<div ng-if="!myArray || myArray.length === 0">为空</div>

2. 变量名拼写不一致 #

仔细核对一下模板里的数组变量名，和控制器（或者组件）里定义的变量名是不是完全一样？比如控制器里是$scope.dataList，模板里写成了dataArray，那肯定读不到正确的长度，空状态自然出不来。

3. 试试更简洁的ng-switch替代方案 #

如果不想写两个ng-if，用ng-switch能让逻辑更清晰，还能避免重复判断：

<div ng-switch on="myArray && myArray.length">
  <div ng-switch-when="0">为空</div>
  <div ng-switch-default>长度: {{myArray.length}}</div>
</div>

你可以先检查第一个原因，这是最常见的情况！如果还是不行，把控制器里数组初始化的代码也贴出来，能更快定位问题~

内容的提问来源于stack exchange，提问作者amacdonald