一、绑定属性
# 在 ts 文件构造方法中定义属性public title = '这是绑定属性';# 在 html 文件中绑定<div [title]="title">绑定属性</div>
二、绑定数据
# 在 ts 文件构造方法中定义属性public userInfo: any = {username: '张三1',age: 20};# 在 HTML 文件中绑定数据<h3>{{userInfo.username}}</h3>
三、绑定HTML
# 在 ts 文件构造中定义属性public content = '<h2>我是一个html标签</h2>';# 在 HTML 文件中绑定<span [innerHTML]="content"></span>
四、循环数据
# 在 ts 文件构造中定义属性arr = ['111', '222', '333'];# 数组public list: any[] = ['111', 123, '222'];# 和上一个数组一样public items: Array<any> = ['1', '2'];# 数组public userList: Array<any> = [{username: '张山',age: 20}, {username: '李四',age: 21}, {username: '王五',age: 22}];# 数组public cars: any[] = [{cate: '宝马',list: [{title: '宝马x1',price: '30万'}, {title: '宝马x2',price: '40万'}, {title: '宝马x3',price: '50万'}]}, {cate: '奥迪',list: [{title: '奥迪a1',price: '30万'}, {title: '奥迪a2',price: '40万'}, {title: '奥迪a3',price: '50万'}]}];# 在 HTML 文件中循环数据<ul><li *ngFor="let item of arr">{{item}}</li></ul># 第二个<ul><li *ngFor="let item of userList">{{item.username}} --- {{item.age}}</li></ul># 第三个<ul><li *ngFor="let item of cars">{{item.cate}}<ol *ngFor="let car of item.list">{{car.title}} --- {{car.price}}</ol></li></ul>
五、简单运算
1+2={{1+2}}
