Angular中*ngIf判断异常求助：为何总是判定为true？

核心逻辑错误：数组length永远不会小于0 #

JavaScript中，数组的length属性是非负整数：

• 空数组的length为0
• 有元素的数组length是正整数
• 即使数组被清空，length也只会是0，不可能出现负数。你写的wishitems.length <0条件永远不会成立，这就是为什么你的else分支/第二个ngIf永远不触发的原因。

你的写法问题汇总 #

1. ngIf else语法完全错误：
   Angular的*ngIf else需要配合<ng-template>定义else块，不能直接在元素上写ngIfElse属性，更不能把else条件写在属性里。你之前的写法不符合Angular模板语法规范，导致逻辑混乱。
2. 变量名大小写不一致：
   代码里同时出现了wishitems和wishItems（注意大小写），这是两个不同的变量，Angular会视为独立属性，可能导致条件判断引用了错误的变量。
3. 重复HTML属性：
   同一个<span>元素写了两个class属性，浏览器会忽略后面的属性，导致样式不生效。

正确实现方式 #

假设你的需求是：

• 当wishitems数组存在且有元素（length>0）时，显示粉色填充心（fas fa-heart）
• 当数组为空或不存在时，显示白色空心心（far fa-heart）

写法一：使用*ngIf else（推荐）

<!-- 有内容时显示的元素 -->
<span *ngIf="wishitems?.length > 0; else emptyState" 
      class="fas fa-heart float-right" 
      aria-hidden="true">
</span>

<!-- 空状态的模板 -->
<ng-template #emptyState>
  <span class="far fa-heart float-right" 
        aria-hidden="true">
  </span>
</ng-template>

写法二：两个独立ngIf（适合简单场景）

<span *ngIf="wishitems?.length > 0" 
      class="fas fa-heart float-right" 
      aria-hidden="true">
</span>
<span *ngIf="!wishitems || wishitems.length === 0" 
      class="far fa-heart float-right" 
      aria-hidden="true">
</span>

关键细节说明 #

• 可选链?.：wishitems?.length用于防止wishitems为undefined或null时访问length报错，此时表达式结果为undefined，会被*ngIf判定为false。
• 统一变量名：确保模板中使用的变量名和组件类中定义的变量名完全一致（比如全小写wishitems或驼峰wishItems）。
• 关于“ngIf不支持负数”：这是错误说法，*ngIf支持任何合法的布尔表达式，负数会被转为布尔值（非零负数为true，0为false），你的问题和这个无关。

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