Angular 綁定數(shù)據(jù)

1. 數(shù)據(jù)文本綁定

public peopleInfo:any = {
    sex: '2',
    cityList: ['北京', '上海', '深圳', '廈門'],
  }
public keyword: string;
public todolist: any[] = [];
public data:any="any為任意類型標(biāo)識";//推薦

2. 綁定HTML

 this.h="<h2>這是一個 h2 用[innerHTML]來解析</h2>"
 <div [innerHTML]="h"></div>

3.聲明屬性的幾種方式

public 共有（默認(rèn)） 可以在類里外使用
protected 保護(hù)類型 只能在當(dāng)前類和子類中使用
private 私有類型 只能在當(dāng)期類使用

4.綁定屬性
用[]包裹

 <div [id]="id" [title]="msg">調(diào)試工具看看我的屬性</div>

5.數(shù)據(jù)循環(huán) *ngFor;循環(huán)的時候設(shè)置 key:let i = index

export class HomeComponent implements OnInit {
  arr = [{ name: 'poetries', age: 22 }, { name: 'jing' , age: 31}];
  constructor() { }
  ngOnInit() {
  }
}
<ul *ngIf="arr.length>0">
      <li *ngFor="let item of arr;let key = index;">{{item.name}}- {{item.age}}</li>
</ul>

6 條件判斷 *ngIf

<p *ngIf="list.length > 3">這是 ngIF 判斷是否顯示</p>
<p template="ngIf list.length > 3">這是 ngIF 判斷是否顯示</p>

7 *ngSwitch

<ul [ngSwitch]="score">
<li *ngSwitchCase="1">已支付</li>
<li *ngSwitchCase="2">訂單已經(jīng)確認(rèn)</li> <li *ngSwitchCase="3">已發(fā)貨</li>
<li *ngSwitchDefault>無效</li>
</ul>

8 執(zhí)行事件 (click)=”getData()”

<button class="button" (click)="getData()"> 點(diǎn)擊按鈕觸發(fā)事件
</button>
<button class="button" (click)="setData()"> 點(diǎn)擊按鈕設(shè)置數(shù)據(jù)
</button>
getData(){ /*自定義方法獲取數(shù)據(jù)*/ //獲取
  alert(this.msg);
} 
setData(){
    this.msg='這是設(shè)置的值';
}

9 表單事件

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

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

10 雙向數(shù)據(jù)綁定

<input [(ngModel)]="inputVal">
注意引入: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}}

11 [ngClass]、[ngStyle]

1. [ngClass]:

<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>

2. [ngStyle]:

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

12 管道

 public today=new Date();
 <p>{{today | date:'yyyy-MM-dd HH:mm:ss' }}</p>
<!--轉(zhuǎn)換成大寫-->
<p>{{str | uppercase}}</p>
<!--轉(zhuǎn)換成小寫-->
<p>{{str | lowercase}}</p>
<!--保留2~4位小數(shù)-->
<p>{{p | number:'1.2-4'}}</p> 
<!--JavaScript 對象序列化-->
<p>
    {{ { name: 'semlinker' } | json }}
</p> 
<!-- Output: { "name": "semlinker" } -->

<!--管道截取slice-->
<p>{{ 'semlinker' | slice:0:3 }}</p> 
<!-- Output: sem -->

<!-- 管道鏈?zhǔn)?->
<p>
{{ 'semlinker' | slice:0:3 | uppercase }}
</p> 
<!-- Output: SEM -->