下图是我的数据源,一个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标签: