Angular4中*ngIf使用OR语句失效问题排查

这是个典型的逻辑运算符误用问题，咱们一步步拆解清楚：

当你的state值为'canceled'时，先看看你写的条件表达式：

<div *ngIf="state!='open' || state!='canceled'"> something </div>

代入值计算一下：

• state!='open' → 'canceled' != 'open' → 结果是true
• state!='canceled' → 'canceled' != 'canceled' → 结果是false
• 用||（或运算）连接时，只要其中一个表达式为true，整个条件就会判定为true，所以内容自然会显示出来，这和你预期的完全相反。

你真正想要的逻辑是：当state既不是'open'也不是'canceled'时，才显示内容，这时候应该用&&（与运算），而不是||。正确的代码应该写成：

<div *ngIf="state!='open' && state!='canceled'"> something </div>

再验证一次：当state='canceled'时，state!='open'是true，但state!='canceled'是false，true && false的结果为false，内容就会隐藏，完全符合你的预期。

你单独用state!='canceled'时有效，是因为这个条件直接精准判断了state不是canceled，逻辑本身没问题，但组合条件时搞错了运算符类型才导致异常。

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