Angular 条件指令 ngIf 的一个例子

简介: Angular 条件指令 ngIf 的一个例子

下图是我的数据源,一个json数组,每个元素是一个product对象,其中最后一个product对象的description字段为空。image.png

在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标签:image.png

image.png

相关文章
|
2月前
|
JavaScript
如何在 Angular 中使用 ViewChild 来访问子组件、指令或 DOM 元素
如何在 Angular 中使用 ViewChild 来访问子组件、指令或 DOM 元素
27 0
|
2月前
|
索引
Angular 中的 ngFor 指令
Angular 中的 ngFor 指令
41 0
|
2月前
|
JavaScript
如何在自定义 Angular 指令中使用 @HostBinding 和 @HostListener
如何在自定义 Angular 指令中使用 @HostBinding 和 @HostListener
31 0
|
5月前
|
JavaScript 前端开发 编译器
Angular 中的结构指令运行时的工作原理
Angular 中的结构指令运行时的工作原理
|
前端开发 JavaScript
对于Angular表达式以及重要指令的研究心得【前端实战Angular框架】
对于Angular表达式以及重要指令的研究心得【前端实战Angular框架】
对于Angular表达式以及重要指令的研究心得【前端实战Angular框架】
angular32-其他指令ng-checked
angular32-其他指令ng-checked
74 0
angular32-其他指令ng-checked
angular21-关于指令标准属性
angular21-关于指令标准属性
80 0
angular21-关于指令标准属性