Angular 绑定数据、条件判断、数据循环、加载图片、【ngClass】 【ngStyle】、Angular管道 、事件、表单事件、事件对象、双向数据绑定

创建 angualr 组件

创建组件

ng g component components/header

使用组件

<app-header></app-header>

Angular 绑定数据

数据文本绑定

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

绑定 html

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

绑定属性

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

数据循环 *ngFor

*ngFor 普通循环

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

循环的时候设置 key

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

template 循环数据

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

条件判断 *ngIf

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

ngSwitch

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

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

html
<button class="button" (click)="setData()"> 点击按钮设置数据 </button>

js 
setData(){ 
	//设置值 
	this.msg='这是设置的值';
 }

双向数据绑定

注意需要在模块中引入表单模块
import { FormsModule } from ‘@angular/forms’;

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

[ngClass]、[ngStyle]

[ngClass]

<div [ngClass]="{'red': true, 'blue': false}"> 这是一个 div </div> 
<div [ngClass]="{'red': flag, 'blue': !flag}"> 这是一个 div </div> 
<ul>
	<li *ngFor="let item of arr, let i = index"> 
		<span [ngClass]="{'red': i==0}">{{item}}</span> 			 </li> 
</ul>

[ngStyle]

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

管道

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

自定义管道

1、创建管道

ng g pipe pipe/formattime

2、用到的模块引入并且声明

import { FormattimePipe } from '../../pipe/formattime.pipe';

@NgModule({
 	declarations: [.....,FormattimePipe],
})

3、使用

{{ data.add_time | formattime}}