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"; }