组件中声明数据
声明简单数据
- 在相应组件的ts文件中的export中使用public（公有，默认是公有，可不写，在当前类，子类，外部都可以访问到）；protected（保护类型，在当前类和子类中可以访问到）；private（私有，在当前类中可以访问到）声明变量。如：
export class HeaderComponent implements OnInit {
public title:string="我是头部组件"
constructor() { }
}
然后在需要用到的html处{{变量名}}即可使用,最好指定数据类型，如此处指定了数据类型是string
声明对象类的数据
- 方法和简单类的数据一样，只是数据类型为object或者any
export class HeaderComponent implements OnInit {
public title:string="我是头部组件"
public userinfor:object={
name:'张三',
age:20
}
constructor() { }
}
使用时在使用处{{userinfor.name}}即可访问到其中的数据进行渲染
声明数据但是不赋值
- 也可声明数据（属性）但是不赋值，在方法中进行赋值，如
export class HeaderComponent implements OnInit {
public title:string="我是头部组件"
public userinfor:object={
name:'张三',
age:20
}
public msg:any;
constructor() {
this.msg="给属性赋值"
this.title="我是改变后的头部组件"
}
}
在方法中进行赋值时使用this.数据名拿到数据进行赋值,此方法同样适用于已经赋值的数据
绑定属性
- 绑定静态属性
直接在其后写入
<p>
{{title}}
{{userinfor.name}}
{{msg}}
</p>
<div class="我是一个静态属性">
看看我的属性
</div>
- 绑定动态属性，此时在需要的属性名上使用[]包裹起来，其等于的内容是在ts文件中声明的数据，属性的声明和数据是一样的
<div [class]="student">
看看我的属性
</div>
绑定html
- 在ts中声明
public content:any="<p>我是一段内容</p>"
- 在html中渲染
<div [innerHTML]='content'></div>
- 在html模版中允许做简单的计算如
<div>
1+2={{1+2}}
</div>
显示的内容为1+2=3
angular中的数据循环（遍历）
- 类似于vue中的v-for
<li *ngFor="let item of arr">{{item}}</li>
- 循环复杂数组,如下
public cars:Array<any>=[
{
title:"奥迪",
list:[
{
title:'奥迪q1',
price:'30万'
},
{
title:'奥迪q2',
price:'40万'
},
{
title:'奥迪q3',
price:'50万'
}
]
},
{
title:"宝马",
list:[
{
title:'宝马q1',
price:'50万'
},
{
title:'宝马q2',
price:'60万'
},
{
title:'宝马q3',
price:'70万'
}
]
}
]
- 遍历时：
<div *ngFor="let item of cars;let key=index;">
{{key}}--{{item.title}}
<ul>
<li *ngFor="let car of item.list">
{{car.title}}--{{car.price}}
</li>
</ul>
</div>
即可,注意里面的let key=index;得到索引
