Angular指令不能与ng-container一起工作

Question

下面给出的代码ng-if没有按预期工作

如果displayGroupvalue是D，那么它将打印第一个和第二个块，我写错了吗

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

Answer 1

如果您想检查bookTravelInfo.displayGroup是'A'或'B'或'C'，

使用

*ngIf="['A', 'B', 'C'].includes(bookTravelInfo.displayGroup | uppercase)"

||逻辑或运算符从您的*ngIf将永远不会返回false。

根据ToBoolean，当值既不是null，也不是undefined或false时，作为返回true的布尔结果。

因此第一个<div>元素仍然显示为:

*ngIf="(bookTravelInfo.displayGroup | uppercase) === 'A' || 'B' || 'C'"