Angular ng-show 在为空时仍显示 <div> 元素

Question

当值为空时，如何 hide/remove 包含 <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，因此请在 ng-show 中使用 info.ID .

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

如果您不想渲染元素本身，那么使用 ng-if directive since ng-show directive 只需使用一些 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 运算符，否则你可能会得到这个错误：

Can't get ID of null

Angular ng-show Still Shows <div> Element When Empty