Angular2 select用法-設置默認值和事件

設置默認值： 
如今有三個學生小明，小紅，小黑，對雙向綁定的student設置你想要的select值就能夠在下拉框默認選中 
code1： 
設置」請選擇」爲默認項，只須要把變量student設置爲‘’，便可默認到「請選擇」 
方案1：

TS:
students:string[]=['xiaoming','xiaohong','xiaohei'];
student:string='';

HTML:
  <select [(ngModel)]="student">
        <option value="">請選擇</option> //此處用的是value，而不是[value]
        <option *ngFor="let item of students" [value]='item'>{{item}}</option>  
    </select>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

方案2：

TS:
students:string[]=['','xiaoming','xiaohong','xiaohei'];
student:string='';

HTML:
<select [(ngModel)]="student">
  <option *ngFor="let item of students" [value]='item'>{{item || '請選擇'}}</option>  
</select>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

code2： 
當須要設置默認值到xiaoming時，只須要將變量student的初始值設爲「xiaoming」

TS:
students:string[]=['xiaoming','xiaohong','xiaohei'];
student:string='xiaoming';

HTML:
    <select [(ngModel)]="student">
        <option *ngFor="let item of students" [value]='item'>{{item}}</option>  
    </select>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

綁定事件 
select下拉框主要經過ngModel和ngModelChange實現選擇事件 
若是你想要在select下拉框選中某一項時觸發事件，能夠將[(ngModel)]拆成ngModel和ngModelChange來實現

TS:
students:string[]=['xiaoming','xiaohong','xiaohei'];
student:string='';
info:string='';
setInfo(){
    this.info=student;
}

HTML:
<select [ngModel]="student" (ngModelChange)="student=$event;setInfo()">
    <option value="">請選擇</option>
    <option *ngFor="let item of students" [value]='item'>{{item}}</option>  
</select>
{{info}}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

在屬性綁定中，一個值從模型中傳到屏幕上的目標屬性。 咱們經過把名字括在方括號中來標記出目標屬性， [] 。 這是一個 從模型到視圖 的單向數據綁定。

在事件綁定中，值從屏幕上的目標屬性傳到模型中。 咱們經過把名字括在圓括號中來標記出目標屬性， () 。 這是一個 從視圖到模型 的反向單向數據綁定。

在Angular2中[(x)] 的綁定目標時，會以x和xChange表示他的輸入和輸出屬性。

代碼中student=$event 原理以下ngModelChange是一個 Angular EventEmitter 類型的屬性，當它觸發時，它返回的是輸入框的值

點擊觀看更多關於ngModel的知識