Angular里的structural directive的一个例子

在product-list.component.html里，编写如下代码：

<h2>Jerry Products</h2>

<div *ngFor="let product of products">
  <h3>
      {{ product.name }}
  </h3>
</div>

这些product的测试数据编写在文件products.ts里：

在product-list.component.ts里，导入Component ProductListComponent:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XMPlQrx7-1597136299073)(upload-images.jianshu.io/upload_imag…)]

两个大括号内部的语法：

let <单数形式> of <复数形式>

复数形式可以在product-list.component.ts的export里自定义：

更高级的用法：

<h2>Jerry Products</h2>

<div *ngFor="let product22 of productsJerry2">


    <h3>
    <a [title]="product22.name + ' details'">
      {{ product22.name }}
    </a>
  </h3>
</div>

效果图：

要获取更多Jerry的原创文章，请关注公众号"汪子熙":