AngularJs之数据绑定

个人拙见:AngularJa使用中感觉最给力的是去掉了DOM操作

假设在我们访问的页面中需要显示后台读取的数据,通常情况下

我们是使用ajax请求数据后,通过DOM操作元素将数据显示在组件上

AngularJs的数据绑定在这里我们暂且不使用数据库,使用数组来模拟。

 

1.在.ts中新建一个类(特别像java8),如图所示:

AngularJs之数据绑定

分别是商品的id、商品名称、商品价格、商品星级、商品描述、商品类别

2.在oninit()中初始化数据如图所示:

AngularJs之数据绑定

3.在页面中使用 *ngFor=“let product of products ”

products 代表在.ts中生命的对象名称

product 表示将要使用的数组别名

通过插值表达式引入数值{{product.id}}将数组显示在组件上

如图所示:

AngularJs之数据绑定

 

效果图如下所示:

AngularJs之数据绑定

欢迎关注技术公众号,微信号搜索ColorfulCode 代码男人

分享技术文章,投稿分享,不限技术种类,不限技术深度,让更多人因为分享而受益。

AngularJs之数据绑定