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)(https://upload-images.jianshu.io/upload_images/2085791-00151ff1a589c8e8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]

兩個大括号内部的文法：

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>
      

效果圖：