下图是我的数据源,一个json数组,每个元素是一个product对象,其中最后一个product对象的description字段为空。
在product-list.component.html里,编写如下代码:
<h2>Products</h2>
<div *ngFor="let product of products">
<h3>
<a [title]="product.name + ' details'">
{{ product.name }}
</a>
</h3>
<p *ngIf="product.description">
Description: {{ product.description }}
</p>
</div>
最后效果如下:如果product对象的description字段为空,根本不会渲染p标签:
要获取更多Jerry的原创文章,请关注公众号"汪子熙":