Angular нг-шоу все еще показывает <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, которое не является ID в info объекте, поэтому используйте info.ID в ng-show.

<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>

Используйте оператор Элвиса, иначе вы можете получить эту ошибку:

Невозможно получить идентификатор нуля