在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>
效果图: