[英]Angular ng-show Still Shows <div> Element When Empty
How can I hide/remove the containing <div>
element when the value is empty:当值为空时,如何隐藏/删除包含的
<div>
元素:
<div class="small" ng-show="ID !== ''">{{ info.ID }} | </div>
Renders:渲染:
<div class="small">|</div>
Can I remove the <div>
completely if empty?如果为空,我可以完全删除
<div>
吗? I've tried:我试过了:
<div class="small" ng-show="!ID">{{ info.ID }}</div >
You are checking value of ID
property which is not the ID
within info
object so use info.ID
within the ng-show
.您正在检查
ID
属性的值,它不是info
对象中的ID
,因此info.ID
在ng-show
使用info.ID
。
<div class="small" ng-show="info.ID">{{ info.ID }} | </div>
<!-- -----------------------^^^^^^^----------------------->
If you don't want to render the element itself then use ng-if
directive since ng-show
directive simply hide using some CSS.如果你不想渲染元素本身,那么使用
ng-if
指令,因为ng-show
指令只是使用一些 CSS 隐藏。
<div class="small" ng-if="info.ID">{{ info.ID }} | </div>
<!-- ---------------------^^^^^^^----------------------->
If you only want to hide the element then use:如果您只想隐藏元素,请使用:
<div class="small" [hidden]="info?.ID">{{ info?.ID }}</div>
If you alse want to avoid rendering it (which is better in most cases) then use:如果您还想避免渲染它(在大多数情况下更好),请使用:
<div class="small" *ngIf="info?.ID">{{ info?.ID }}</div>
Use the Elvis operator otherwise you may get this mistake:使用 Elvis 运算符,否则您可能会遇到此错误:
Can't get ID of null
无法获取空 ID
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.