Angular2 select用法-设置默认值和事件

原网址 : https://blog.csdn.net/erciyuan_nuonuo/article/details/53106644?locationNum=4&fps=1

设置默认值: 

现在有三个学生小明,小红,小黑,对双向绑定的student设置你想要的select值就可以在下拉框默认选中 

code1: 

设置”请选择”为默认项,只需要把变量student设置为‘’,即可默认到“请选择” 

方案1:


方案2:


code2: 

当需要设置默认值到xiaoming时,只需要将变量student的初始值设为“xiaoming”


绑定事件 

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

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


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

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

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

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

点击观看更多关于ngModel的知识

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,581评论 1 11
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,273评论 19 139
  • 继《追风筝的人》之后,这是胡赛尼的第二本,战乱中的阿富汗,两个不同年龄段的女人因为命运而缔结在了一起,她们忍耐,妥...
    15廖淑君阅读 147评论 0 0
  • 致橡树 文/舒婷 我如果爱你—— 绝不像攀援的凌霄花, 借你的高枝炫耀自己; 我如果爱你—— 绝不学痴情的鸟儿, ...
    juju阅读 361评论 0 4
  • 2017农历年即将过去了……随之而去的或许是心中那份藏之多年的感情! 情人节,在我记忆中 自从认识了你,每年的2...
    蘇蘇13阅读 153评论 0 0