角度：显示或隐藏元素而不会影响元素间距

Question

我有一排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

Answer 1

要确保h5元素不会折叠，请将不可破坏的空间设置为defaut值：

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

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

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

有关演示，请参见this stackblitz。