Angular 中使用{{}}绑定业务逻辑里面定义的数据
数据文本绑定 {{}}
{{title}}
{{userinfo.username}} {{message}} {{student}}
angualr模板里面绑定属性 <span [innerHTML]='content' class="red">
angualr模板里面允许做简单的运算 1+2={{1+2}}
数据循环 *ngFor
- <li *ngFor="let item of list">{{item}}
循环的时候设置 key
- <li *ngFor="let item of list;let key=index;">
- {{key}}---{{item.title}}
条件判断语句 *ngIf
<div *ngIf="flag">
<div *ngIf="!flag">
- <li *ngFor="let item of list;let key=index;"> <span *ngIf="key==1" class="red">{{key}}---{{item.title}} <span *ngIf="key!=1">{{key}}---{{item.title}}
属性[ngClass]<div [ngClass]="{'blue':true,'red':false}">
ngClass演示
<div [ngClass]="{'orange':flag,'red':!flag}">
ngClass演示
管道{{today | date:'yyyy-MM-dd HH:mm ss'}}
执行事件(click)home.component.html
{{title}} <button (click)="run()">执行事件
<button (click)="setData()">执行方法改变属性里面的数据 <button (click)="runEvent($event)">执行方法获取事件对象
home.component.ts
run(){console.log('这是一个自定义方法') console.log(this.title); } setData(){ this.title='我是一个改变后的title'; } // $event runEvent(event){ //ionic必须这样写 let dom:any=event.target; dom.style.color="red"; }