Angular 條件指令 ngIf 的一個例子

下圖是我的資料源，一個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标簽：