Angular条件指令ngIf的一个例子

时间:2022-07-23
本文章向大家介绍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标签: