Angular学习第三课--相关数据绑定汇总

1、如何使用组件

 

2、Angular绑定数据

2.1 数据文本绑定

<h1>
{{title}}
</h1>
<div>
1+1={{1+1}}
</div>

2.2 绑定html

this.h="<h2>这是一个 h2 用[innerHTML]来解析</h2>"


<div [innerHTML]="h"></div>

2.3 动态绑定html属性值

<div [id]="id" [title]="msg">调试工具看看我的属性</div>

2.4 数据循环 *ngFor

1、普通循环

<ul>
<li *ngFor="let item of list">
{{item}}
</li>
</ul>

2、循环时设置key

<ul>
<li *ngFor="let item of list;let i = index;">
{{item}} --{{i}}
</li>
</ul>

3、template循环数据

<ul>
<li template="ngFor let item of list">
{{item}}
</li>
</ul>

2.5 条件判断 *ngIf

<p *ngIf="list.length > 3">这是 ngIF 判断是否显示</p>

<p template="ngIf list.length > 3">这是 ngIF 判断是否显示</p

 

2.6 *ngSwitch 分支判断

<ul [ngSwitch]="score">
<li *ngSwitchCase="1">已支付</li>
<li *ngSwitchCase="2">订单已经确认</li>
<li *ngSwitchCase="3">已发货</li>
<li *ngSwitchDefault>无效</li>
</ul>

2.7 执行事件(click)=”getData()”

<button class="button" (click)="getData()">
点击按钮触发事件
</button>
<button class="button" (click)="setData()">
点击按钮设置数据
</button>



getData(){ /*自定义方法获取数据*/
//获取
alert(this.msg);
} s
etData(){
//设置值
this.msg='这是设置的值';
}

2.8 表单事件

<input type="text" (keyup)="keyUpFn($event)"/>

keyUpFn(e){
console.log(e)
}

2.9 动态绑定样式 [ngClass]、[ngStyle]

<div [ngClass]="{'red': true, 'blue': false}">
这是一个 div
</div>


public flag=false;
<div [ngClass]="{'red': flag, 'blue': !flag}">
这是一个 div
</div>


public arr = [1, 3, 4, 5, 6];
<ul>
<li *ngFor="let item of arr, let i = index">
<span [ngClass]="{'red': i==0}">{{item}}</span>
</li>
</ul>

<div [ngStyle]="{'background-color':'green'}">你好 ngStyle</div>


public attr='red';
<div [ngStyle]="{'background-color':attr}">你好 ngStyle</div>

2.10 双向数据绑定

//注意根组件AppComponent引入模块： FormsModule
import { FormsModule } from '@angular/forms';


@NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
NewsComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }


//使用
<input type="text" [(ngModel)]="inputValue"/>
{{inputValue}}

2.11 管道（数据格式化）

public today=new Date();




<p>{{today | date:'yyyy-MM-dd HH:mm:ss' }}</p>

其他管道：

http://bbs.itying.com/topic/5bf519657e9f5911d41f2a34