Angular ng-show 仍然顯示<div>空時的元素

Question

當值為空時，如何隱藏/刪除包含的<div>元素：

<div class="small" ng-show="ID !== ''">{{ info.ID }} | </div>

渲染：

<div class="small">|</div>

如果為空，我可以完全刪除<div>嗎？ 我試過了：

<div class="small" ng-show="!ID">{{ info.ID }}</div >

Answer 1

您正在檢查ID屬性的值，它不是info對象中的ID ，因此info.ID在ng-show使用info.ID 。

<div class="small" ng-show="info.ID">{{ info.ID }} | </div>
<!-- -----------------------^^^^^^^----------------------->

---

如果你不想渲染元素本身，那么使用ng-if指令，因為ng-show指令只是使用一些 CSS 隱藏。

<div class="small" ng-if="info.ID">{{ info.ID }} | </div>
<!-- ---------------------^^^^^^^----------------------->

Answer 2

如果您只想隱藏元素，請使用：

<div class="small" [hidden]="info?.ID">{{ info?.ID }}</div>

如果您還想避免渲染它（在大多數情況下更好），請使用：

<div class="small" *ngIf="info?.ID">{{ info?.ID }}</div>

使用 Elvis 運算符，否則您可能會遇到此錯誤：

無法獲取空 ID