Angular笔记三——绑定数据以及数据循环

绑定数据方法

模板里面绑定数据

上一个笔记将过绑定数据的一个方法通过public,我们也可以不写public,默认下就是public声明。但是推荐在绑定数据后面加上数据类型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-atN00o9T-1604023448150)(/Users/mac/Desktop/MarkDown /Angular笔记/笔记三/1.jpg)]

也可以指定any类型,表示任意类型

声明属性的几种方式

  • public:共有(默认),可以在这个类里面使用,也可以在类外面使用。
  • protected:保护类型,它只有在当前类和它的子类里面可以访问。
  • private:私有,只有在当前类才可以访问。

模板里面绑定属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LngA2G6a-1604023448152)(/Users/mac/Desktop/MarkDown /Angular笔记/笔记三/2.jpg)]

动态数据的属性,用中括号包起来。

模板里面绑定html标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VvzYLOLH-1604023448154)(/Users/mac/Desktop/MarkDown /Angular笔记/笔记三/3.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sb7FEG8f-1604023448156)(/Users/mac/Desktop/MarkDown /Angular笔记/笔记三/4.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EIxEEhpK-1604023448157)(/Users/mac/Desktop/MarkDown /Angular笔记/笔记三/5.jpg)]

模板里面允许做简单的运算

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zcDBUyzO-1604023448159)(/Users/mac/Desktop/MarkDown /Angular笔记/笔记三/6.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KyLlG5Mg-1604023448160)(/Users/mac/Desktop/MarkDown /Angular笔记/笔记三/7.jpg)]

数据循环

要使用到*ngFor语句。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y1Qez0Bn-1604023448162)(/Users/mac/Desktop/MarkDown /Angular笔记/笔记三/8.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q1d5mdKy-1604023448164)(/Users/mac/Desktop/MarkDown /Angular笔记/笔记三/9.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ELqTjeUe-1604023448166)(/Users/mac/Desktop/MarkDown /Angular笔记/笔记三/10.jpg)]

一般建议用下面方式定义数组,虽然意义是一样的。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GS2rBph7-1604023448169)(/Users/mac/Desktop/MarkDown /Angular笔记/笔记三/11.jpg)]

  • 正常情况下,数组中都是包含大量的对象,对象中又包含大量的属性:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nSp74UdP-1604023448179)(/Users/mac/Desktop/MarkDown /Angular笔记/笔记三/12.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aR7PfjvN-1604023448181)(/Users/mac/Desktop/MarkDown /Angular笔记/笔记三/13.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lSKKZEPn-1604023448182)(/Users/mac/Desktop/MarkDown /Angular笔记/笔记三/14.jpg)]

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值