Angular指令配合ng-container不生效及ngIf判断逻辑异常问题

错误原因 #

你代码中第一个*ngIf的逻辑表达式写法不符合JavaScript运算规则，导致判定结果恒为真：

• 你写的(bookTravelInfo.displayGroup | uppercase) === 'A' || 'B' || 'C'实际运算逻辑为：
  • 首先计算(bookTravelInfo.displayGroup | uppercase) === 'A'的布尔值
  • 若上述结果为假，会直接判定||后的'B'的布尔值，非空字符串的布尔值永远为true
  • 因此不管displayGroup取值是什么，第一个div的判定条件永远成立，所以取值为D时两个块都会渲染

修复方案 #

写法1：补全所有相等判定 #

<div *ngIf="(bookTravelInfo.displayGroup | uppercase) === 'A' || (bookTravelInfo.displayGroup | uppercase) === 'B' || (bookTravelInfo.displayGroup | uppercase) === 'C'">
  <h2>Perfect!</h2>
</div>
<div *ngIf="(bookTravelInfo.displayGroup | uppercase) === 'D'">
  <h2>Does not Perfect</h2>
</div>

写法2：用数组includes简化判断（更推荐，可读性更高） #

<div *ngIf="['A','B','C'].includes(bookTravelInfo.displayGroup | uppercase)">
  <h2>Perfect!</h2>
</div>
<div *ngIf="(bookTravelInfo.displayGroup | uppercase) === 'D'">
  <h2>Does not Perfect</h2>
</div>

ng-container搭配使用方案 #

如果需要避免生成冗余的div节点，可以用ng-container包裹内容，ng-container本身不会被渲染为真实DOM节点：

<ng-container *ngIf="['A','B','C'].includes(bookTravelInfo.displayGroup | uppercase)">
  <h2>Perfect!</h2>
</ng-container>
<ng-container *ngIf="(bookTravelInfo.displayGroup | uppercase) === 'D'">
  <h2>Does not Perfect</h2>
</ng-container>

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