Angular 指令不適用於 ng-container

Question

下面給出的代碼 ng-if 沒有按預期工作

如果displayGroup值為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中的邏輯 OR 運算符永遠不會返回false 。

由於 boolean 結果返回true當值既不是null ，也不是undefined或false根據ToBoolean 。

因此第一個<div>元素仍然顯示為：

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