博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
angular2怎么获取下拉框的值
阅读量:7225 次
发布时间:2019-06-29

本文共 767 字,大约阅读时间需要 2 分钟。

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

你可能感兴趣的文章
E-HPC支持多队列管理和自动伸缩
查看>>
express + mock 让前后台并行开发
查看>>
30天自制操作系统-2
查看>>
小程序开发之路(一)
查看>>
Odoo domain写法及运用
查看>>
JavaScript工作原理(五):深入了解WebSockets,HTTP/2和SSE,以及如何选择
查看>>
猫头鹰的深夜翻译:Java 2D Graphics, 简单的仿射变换
查看>>
面试题:给你个id,去拿到name,多叉树遍历
查看>>
go append函数以及写入
查看>>
关于Java中分层中遇到的一些问题
查看>>
配置 PM2 实现代码自动发布
查看>>
android百种动画侧滑库、步骤视图、TextView效果、社交、搜房、K线图等源码
查看>>
iOS仿今日头条、壁纸应用、筛选分类、三方微博、颜色填充等源码
查看>>
诡异!React stopPropagation失灵
查看>>
Python_OOP
查看>>
个人博客开发系列:评论功能之GitHub账号OAuth授权
查看>>
mongodb--安装和初步使用教程
查看>>
ES6简单总结(搭配简单的讲解和小案例)
查看>>
text-decoration与color属性
查看>>
如何使用Mybatis第三方插件--PageHelper实现分页操作
查看>>