Angular 綁定資料、條件判斷、資料循環、加載圖檔、【ngClass】 【ngStyle】、Angular管道 、事件、表單事件、事件對象、雙向資料綁定

建立 angualr 元件

建立元件

ng g component components/header
           

使用元件

Angular 綁定資料

資料文本綁定

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

綁定 html

綁定屬性

資料循環 *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>
           

管道

自定義管道

1、建立管道

ng g pipe pipe/formattime
           

2、用到的子產品引入并且聲明

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

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

3、使用