一、绑定数据

二、绑定属性

三、绑定html

四、简单计算

五、进行数组的循环

---

一、绑定数据

1、在后端pulic一段文字：

前端进行调用，使用两个大括号进行绑定；然后在终端输入ng serve --open运行

2、第二种形式，可以直接声明一句话，然后进行调用，前面没有声明东西表示为public：

后端：

前端：

3、但是还是应该比较严谨，加上类型，用下面的方法加入：

也可以用下面这种方法：

如果把string换成any就表示可以是任何类型。

同理，也可以声明一个对象，然后进行调用：

后端：

前端：

也可以在构造函数里面进行赋值：

构造函数也可以获取和改变上面的值：

Console的值在网页审查元素里面看（鼠标右键）。

二、绑定属性

绑定属性则使用title关键字来进行绑定：

然后弹出来的页面，将鼠标放在zhang san上就会显示student的内容。

注意：如果是动态的使用中括号包起来，如果是静态的则直接写就可以了。

三、绑定html

后端输入下面：

前端进行调用的方法：

如果想要进行样式的添加，后面写上class，然后在css里面进行添加样式

四、简单计算

在html中输入，页面就会自动计算：

效果图：

五、进行数组的循环

后端代码：

public arr=["22","33"];

前端代码：

 <div *ngFor="let item of arr">{{item}}</div>>

如果数组里面存放了多个对象的循环方法：

后端：

  public userlist:any[]=[{username:'adam',age:13},{username:'Jerry',age:15}];

前端：

<div *ngFor="let item of userlist">{{item.username}}---{{item.age}}
</div>

更复杂的情况遍历数组：

后端：

 public arr2:any[]=[{name:'蔬菜',list:[{title:'萝卜',price:23},{title:'白菜',price:23},{title:'黄瓜',price:23}]},{name:'水果',list:[{title:'苹果',price:23},{title:'香蕉',price:23},{title:'葡萄',price:23}]}];

前端：面向对象原则，把每一个对象看作一个整体。

<div *ngFor="let item of arr2">{{item.name}}<li *ngFor="let item1 of item.list">{{item1.name}}---{{item1.price}}</li>
</div>