angular入门篇(1)——属性的声明、绑定；数据的绑定与循环

1,属性的声明

   有两种常见的方法:一：直接定义，不赋值，最好指定类型；

                                             二:先定义，后赋值；

TS代码如图;

---

2,属性的绑定

常用插值符号 "{{ }}" html页面来绑定ts页面设定好的属性

---

3,数据的绑定

  一:标签内部，类似插值绑定，例: <div id="{{aid}}">我是测试</div>;

二:标签内部，中括号绑定，此时是不需要花括号的，例:<div [title]="我可以为属性变量">我是测试2</div>;

三:如果绑定带标签的变量，可以使用<div [innerHTML]="h"></div>,解析带标签的字符串;

HTML代码：

---

4,数据的循环

一：数据循环使用的是"*ngFor",被循环的对象一定是一个数组:a=[ '11','22','33'];类似这样的,其中数组里面可以嵌套数组和对象，"*ngFor"与"*ngIf"不能在同一标签使用(解决方法：另外嵌套一层div或者ngIf改为Hidden),格式"let item of ltems",输出的每一行item 均可带序号;

TS页面定义的几种由易至难的数组格式;

---

对于list3,首先循环出的item 是一个 对象{'title':'宝马','details': [{'con':'宝马X1'},{'con':'宝马X2'},{'con':'宝马X3'},{'con':'宝马X4'}] },接着循环对象属性里面的"details" 这个数组,

---

最终的渲染结果：

---

总结：

循环也可以使用<div template="ngFor let item of items">{{item}}</div>;格式不一样，达到的效果其实是一样的。