angular2怎么获取下拉框的值

最新推荐文章于 2018-11-21 15:26:18 发布

转载最新推荐文章于 2018-11-21 15:26:18 发布 · 690 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/enzhao/p/8622434.html

文章标签：

本文介绍如何在Angular中使用ngModel和ngModelChange来实现在select下拉框选择项时触发事件的方法。通过示例代码展示了具体实现过程，并解释了属性绑定与事件绑定的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

select下拉框主要通过ngModel和ngModelChange实现选择事件

如果你想要在select下拉框选中某一项时触发事件，可以将[(ngModel)]拆成ngModel和ngModelChange来实现

<select [ngModel]="data" (ngModelChange)="data=$event;setInfo()">

<option value="">请点击选择</option>

<option *ngFor="let item of datas" [value]='item'>{{item}}</option>

</select>

{{info}}

let datas:string[]=['A_01','A_02','A_03'];
let data:string='';
let info:string='';
setInfo(){
 this.info=data;
}

在属性绑定中，一个值从模型中传到屏幕上的目标属性。我们通过把名字括在方括号中来标记出目标属性， [] 。这是一个从模型到视图的单向数据绑定。

在事件绑定中，值从屏幕上的目标属性传到模型中。我们通过把名字括在圆括号中来标记出目标属性， () 。这是一个从视图到模型的反向单向数据绑定。

在Angular2中[(x)] 的绑定目标时，会以x和xChange表示他的输入和输出属性。

代码中student=$event 原理如下ngModelChange是一个 Angular EventEmitter 类型的属性，当它触发时，它返回的是输入框的值

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

转载于:https://www.cnblogs.com/enzhao/p/8622434.html