时间戳

首页 > 解决方案 > Angular：显示或隐藏元素而不影响元素间距

html - Angular：显示或隐藏元素而不影响元素间距

问题描述

我有一排包含品牌名称和图像等信息的 div。如果品牌有名称，我想显示它，否则将其留空。问题不在于所有产品都有品牌名称。无论是否有名称，我都希望保持间距一致。

我已经尝试过 ngIf 和 hidden 指令，但都没有想要的结果。

<div  *ngFor="let product of products">
    <h5 class="product-brandname" [hidden]="!product.brandname">{{product.brandname}}</h5>
   <img/>
   etc...
</div>

https://www.dropbox.com/s/ucs51qugchvfxso/Screen%20Shot%202019-01-28%20at%202.03.48%20PM.png?dl=0

标签： htmlcssangular

解决方案

为确保h5元素不会折叠，请将不可破坏的空格设置为默认值：

<h5 class="product-brandname">{{ product.brandname || "&nbsp;" }}</h5>

如果你真的想隐藏h5仍然占据相同空间的空元素，请将它们的样式可见性属性设置为hidden. 在这种情况下，默认文本可以是任何非空字符串：

<h5 class="product-brandname" [style.visibility]="product.brandname ? 'visible' : 'hidden'">
  {{ product.brandname || "Any text" }}
</h5>

请参阅此 stackblitz以获取演示。

推荐阅读