前面讲解了angular环境的搭建,自定义组件的创建,使用。这都只是入门,准备好进入Angular的世界了吗?
学习完这章,我们要会一下内容:
第一个创建组件已经说了,就不多bibi了
二. Angular数据的绑定
学过1.x的应该都明白,调用数据是{{ }}
这里也是:
news.component.ts文件中定义,html中调用
推荐的写法是:
public username:string="李四";
声明属性 属性名称:属性类型="属性的值";
在html中调用:
声明类型有
public private protected(保护)
这就是最基本的数据绑定:
1.定义一个对象
public teacher:object={
name:"王五",
age:16
}
前端调用
<p>{{teacher.name}}</p>
<p>{{teacher.age}}</p>
就不给展示运行结果了
2..定义数组:
public arr:string[] =["aaa","bbb","ccc"] 强烈推荐
public arr=['aaa','bbb','ccc'];
public list:any[] = ["lsis","llss"];
public array:Array<string>=["第一个","第二个"];
在html中调用:
注意到: *ngFor这个就是对数组的便利,是一个固定的写法
*ngFor="let item of arr" arr就是定义的数组
数组plus
1。数组里面包含对象
//高级数组 数组包含对象
public userList:any[]=[{
username:"李四",
age:18
},{
username:"王五",
age:20
},{
username:"赵六",
age:22
}]
调用;
<ul>
<li *ngFor="let item of userList">
{{item.username+' '+item.age}}
</li>
</ul>
2.数组里面有对象,对象里面有数组
//更加复杂的数组
public cars:any[]=[{
cate:"宝马",
list:[{
title:"宝马x1",
price:300000
},{
title:"宝马x2",
price:3000000
},{
title:"宝马x3",
price:400000
}]
},{
cate:"奥迪",
list:[{
title:"奥迪x1",
price:500000
},{
title:"奥迪x2",
price:5000000
},{
title:"奥迪x3",
price:6000000
}]
}]
调用:
<ul>
<li *ngFor="let item of cars">
{{item.cate}}
<ol>
<li *ngFor="let car of item.list">
{{car.title}}---{{car.price}}
</li>
</ol>
</li>
</ul>
这两个结果截图:
也就是先遍历出第一层,在用第一层的便利下面的
绑定一个html
public content="<h1>我是html<h1>";
调用:
{{content}}
<p [innerHtml]='content' class='red'></p>
两个结果;
#数据的判断
*ngIf
<div *ngIf="flag">
<img [src]="picUrl" />
</div>
//后台数据
public flag:boolean=true;
<p *ngIf="list.length>3">大于3</p>
<p *ngIf="list.length<=3">小于等于3</p>
#数据的循环
*ngFor
<!--循环list 判断如果是第二个为红色-->
<ul>
<li *ngFor="let item of list;let key=index">
<span *ngIf="key==1" class="red"> {{key}} --- {{item.title}} </span>
<span *ngIf="key!=1"> {{key}} --- {{item.title}}</span>
</li>
</ul>
*ngSwitch
<!--ngSwitch ngSwitchCase-->
<div [ngSwitch]="code">
<div *ngSwitchCase="1">已经支付</div>
<div *ngSwitchCase="2">已经确定</div>
<div *ngSwitchCase="3">已经发货</div>
<div *ngSwitchCase="4">已经收货</div>
<div *ngSwitchDefault>无效订单</div>
</div>
//后台数据
public code:number=4;
#管道事件
日期处理
<!--管道-->
{{today | date:"yyyy-HH-mm HH:mm ss"}}
public today:any=new Date();
#事件,也就是方法
<!-- 事件-->
<button (click)="run()">事件</button>
<br>
<button (click)="getData()">获取数据</button>
<button (click)="runEven($event)">获取数据</button>
<br>
<strong>{{title}}</strong>
<button (click)="setData()">修改数据</button>
run(){
alert("执行了")
}
getData(){
alert(this.title)
}
setData(){
this.title="我是修改之后的tatle";
}
***数据的双向绑定,重要
需要先导入FormsModule
import {FormsModule} from '@angular/forms';
<!--双向数据绑定-->
<!--需要引入FormModule-->
<br>
<input type="text" [(ngModel)]="keywords">
<button (click)="uodatekeywords()">修改keywords</button>
{{keywords}}
<br>
<button (click)="getkeywords()">获取keywrds</button>
getkeywords(){
console.log(this.keywords);
}