在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>

效果圖：

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

總結

以上是生活随笔為你收集整理的Angular里的structural directive的一个例子的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。