本文主要給大家介紹了Angular2中select用法之設(shè)置默認(rèn)值與事件的相關(guān)內(nèi)容，分享出來供大家參考學(xué)習(xí)，下面來看看詳細(xì)的介紹：

和田網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián)公司,和田網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為和田成百上千提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)要多少錢，請找那個售后服務(wù)好的和田做網(wǎng)站的公司定做！

一、設(shè)置默認(rèn)值：

現(xiàn)在有三個學(xué)生小明，小紅，小黑，對雙向綁定的student設(shè)置你想要的select值就可以在下拉框默認(rèn)選中

code1：

設(shè)置”請選擇”為默認(rèn)項，只需要把變量student設(shè)置為‘'，即可默認(rèn)到“請選擇”，需要注意的是

<option value="">請選擇</option>使用的是value（這是HTML原生的屬性）

<option *ngFor="let item of students" [value]='item'>{{item}}</option>使用的是[value]（在ng2中使用ngFor時，value需要用ng2的語法，即[value]）

let students:string[]=['xiaoming','xiaohong','xiaohei'];
 let student:string='';
 let info:string='';
 <select [(ngModel)]="student">
 <option *ngFor="let item of students" [value]='item'>{{item}}</option> 
 </select>

code2：

當(dāng)需要設(shè)置默認(rèn)值到xiaoming時，只需要將變量student的初始值設(shè)為“xiaoming”

let students:string[]=['xiaoming','xiaohong','xiaohei'];
 let student:string='xiaoming';
 let info:string='';
 <select [(ngModel)]="student">
 <option *ngFor="let item of students" [value]='item'>{{item}}</option> 
 </select>

二、綁定事件

select下拉框主要通過ngModel和ngModelChange實現(xiàn)選擇事件

如果你想要在select下拉框選中某一項時觸發(fā)事件，可以將[(ngModel)]拆成ngModel和ngModelChange來實現(xiàn)

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

在屬性綁定中，一個值從模型中傳到屏幕上的目標(biāo)屬性。 我們通過把名字括在方括號中來標(biāo)記出目標(biāo)屬性， [] 。 這是一個 從模型到視圖 的單向數(shù)據(jù)綁定。

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

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

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

需要注意的是：目前select下拉框中不支持綁定json對象

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家學(xué)習(xí)或者使用Angular.js能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對創(chuàng)新互聯(lián)的支持。

文章題目：Angular2中select用法之設(shè)置默認(rèn)值與事件詳解
文章位置：http://vcdvsql.cn/article2/pehjoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、App設(shè)計、小程序開發(fā)、品牌網(wǎng)站制作、服務(wù)器托管、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)