绑定数据方法
模板里面绑定数据
上一个笔记将过绑定数据的一个方法通过public，我们也可以不写public，默认下就是public声明。但是推荐在绑定数据后面加上数据类型：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-atN00o9T-1604023448150)(/Users/mac/Desktop/MarkDown /Angular笔记/笔记三/1.jpg)]](https://img-blog.csdnimg.cn/20201030100445641.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM1MTU5Mw==,size_16,color_FFFFFF,t_70#pic_center)
也可以指定any类型，表示任意类型。
声明属性的几种方式：
- public：共有（默认），可以在这个类里面使用，也可以在类外面使用。
- protected：保护类型，它只有在当前类和它的子类里面可以访问。
- private：私有，只有在当前类才可以访问。
模板里面绑定属性
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LngA2G6a-1604023448152)(/Users/mac/Desktop/MarkDown /Angular笔记/笔记三/2.jpg)]](https://img-blog.csdnimg.cn/20201030100458213.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM1MTU5Mw==,size_16,color_FFFFFF,t_70#pic_center)
动态数据的属性，用中括号包起来。
模板里面绑定html标签
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VvzYLOLH-1604023448154)(/Users/mac/Desktop/MarkDown /Angular笔记/笔记三/3.jpg)]](https://img-blog.csdnimg.cn/20201030100509855.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM1MTU5Mw==,size_16,color_FFFFFF,t_70#pic_center)
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sb7FEG8f-1604023448156)(/Users/mac/Desktop/MarkDown /Angular笔记/笔记三/4.jpg)]](https://img-blog.csdnimg.cn/20201030100518964.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM1MTU5Mw==,size_16,color_FFFFFF,t_70#pic_center)
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EIxEEhpK-1604023448157)(/Users/mac/Desktop/MarkDown /Angular笔记/笔记三/5.jpg)]](https://img-blog.csdnimg.cn/20201030100528776.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM1MTU5Mw==,size_16,color_FFFFFF,t_70#pic_center)
模板里面允许做简单的运算
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zcDBUyzO-1604023448159)(/Users/mac/Desktop/MarkDown /Angular笔记/笔记三/6.jpg)]](https://img-blog.csdnimg.cn/20201030100537636.jpg#pic_center)
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KyLlG5Mg-1604023448160)(/Users/mac/Desktop/MarkDown /Angular笔记/笔记三/7.jpg)]](https://img-blog.csdnimg.cn/20201030100546681.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM1MTU5Mw==,size_16,color_FFFFFF,t_70#pic_center)
数据循环
要使用到*ngFor语句。
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y1Qez0Bn-1604023448162)(/Users/mac/Desktop/MarkDown /Angular笔记/笔记三/8.jpg)]](https://img-blog.csdnimg.cn/2020103010055994.jpg#pic_center)
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q1d5mdKy-1604023448164)(/Users/mac/Desktop/MarkDown /Angular笔记/笔记三/9.jpg)]](https://img-blog.csdnimg.cn/20201030100606300.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM1MTU5Mw==,size_16,color_FFFFFF,t_70#pic_center)
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ELqTjeUe-1604023448166)(/Users/mac/Desktop/MarkDown /Angular笔记/笔记三/10.jpg)]](https://img-blog.csdnimg.cn/20201030100616391.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM1MTU5Mw==,size_16,color_FFFFFF,t_70#pic_center)
一般建议用下面方式定义数组，虽然意义是一样的。
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GS2rBph7-1604023448169)(/Users/mac/Desktop/MarkDown /Angular笔记/笔记三/11.jpg)]](https://img-blog.csdnimg.cn/20201030100625836.jpg#pic_center)
- 正常情况下，数组中都是包含大量的对象，对象中又包含大量的属性：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nSp74UdP-1604023448179)(/Users/mac/Desktop/MarkDown /Angular笔记/笔记三/12.jpg)]](https://img-blog.csdnimg.cn/20201030100634362.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM1MTU5Mw==,size_16,color_FFFFFF,t_70#pic_center)
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aR7PfjvN-1604023448181)(/Users/mac/Desktop/MarkDown /Angular笔记/笔记三/13.jpg)]](https://img-blog.csdnimg.cn/20201030100644733.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM1MTU5Mw==,size_16,color_FFFFFF,t_70#pic_center)
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lSKKZEPn-1604023448182)(/Users/mac/Desktop/MarkDown /Angular笔记/笔记三/14.jpg)]](https://img-blog.csdnimg.cn/20201030100653203.jpg#pic_center)