在product-list.component.html里，編寫如下代碼：

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

這些product的測試數(shù)據(jù)編寫在文件products.ts里：

在product-list.component.ts里，導(dǎo)入Component ProductListComponent:

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-XMPlQrx7-1597136299073)(https://upload-images.jianshu.io/upload_images/2085791-00151ff1a589c8e8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]

兩個大括號內(nèi)部的語法：

let <單數(shù)形式> of <復(fù)數(shù)形式>

復(fù)數(shù)形式可以在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的原創(chuàng)文章，請關(guān)注公眾號"汪子熙":

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。