Angular 绑定数据

1. 数据文本绑定

public peopleInfo:any = {
    sex: '2',
    cityList: ['北京', '上海', '深圳', '厦门'],
  }
public keyword: string;
public todolist: any[] = [];
public data:any="any为任意类型标识";//推荐

2. 绑定HTML

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

3.声明属性的几种方式

public 共有（默认） 可以在类里外使用
protected 保护类型 只能在当前类和子类中使用
private 私有类型 只能在当期类使用

4.绑定属性
用[]包裹

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

5.数据循环 *ngFor;循环的时候设置 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">订单已经确认</li> <li *ngSwitchCase="3">已发货</li>
<li *ngSwitchDefault>无效</li>
</ul>

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

<button class="button" (click)="getData()"> 点击按钮触发事件
</button>
<button class="button" (click)="setData()"> 点击按钮设置数据
</button>
getData(){ /*自定义方法获取数据*/ //获取
  alert(this.msg);
} 
setData(){
    this.msg='这是设置的值';
}

9 表单事件

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

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

10 双向数据绑定

<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>
<!--转换成大写-->
<p>{{str | uppercase}}</p>
<!--转换成小写-->
<p>{{str | lowercase}}</p>
<!--保留2~4位小数-->
<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 -->

<!-- 管道链式-->
<p>
{{ 'semlinker' | slice:0:3 | uppercase }}
</p> 
<!-- Output: SEM -->