ng4.x 双向数据绑定

在app.module.ts默认只依赖browserModule,如果要使用其他模块先import引入。


在属性绑定中,值从模型中流动到视图上的目标属性。[],通过把属性名放在方括号中来标记出目标属性。这是从模型到视图的单向数据绑定。

在事件绑定中,值从视图上的目标属性流动到模型。(),通过把属性名放在圆括号中来标记出目标属性。这是从视图到模型的(反向的)单向数据绑定。

所以,组合[]和()就可以实现双向数据绑定和双向数据流。


事实上,我们也可以把NgModel绑定拆分成两个独立的绑定,属性绑定和事件绑定。


No 1 : 首先引入FormsModule表单模块

import { FormsModule } from '@angular/forms';

No 2 :注入

@NgModule ({

      imports:[ ..., FormsModule ] 

})

No 3 : 使用

public search = "请输入搜索内容";

getSearch(){

      alert( this.search);

}

<input type='text' [(ngModel)] = "search" name = "search">

<button (click) = "getSearch()">获取输入框的内容 </button> 

注意:

如何给表单元素监听用户的操作结果?

绑定ngModelChange事件

??



<input [value] = "name"  (input) = "doOnInput($event)">  {{name}}

doOnInput(event){

      this.name = event.target.value;

}

转自:http://www.cnblogs.com/JennyLin77/p/6141124.html



转自:http://www.cnblogs.com/dennis0525/p/7631301.html

Angular 4.x ngModel 双向绑定原理揭秘:https://segmentfault.com/a/1190000009126012

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

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,067评论 19 139
  • 版本:Angular 5.0.0-alpha 表单是商业应用的支柱,我们用它来执行登录、求助、下单、预订机票、安排...
    soojade阅读 1,301评论 0 1
  • 学习资料来自 Angular.cn 与 Angular.io。 模板语法 在线例子 在 Angular 中,组件扮...
    小镭Ra阅读 3,831评论 0 3
  • 前几天做梦梦见发小哭着跟我说三十岁的承诺实现不了了,我也觉得很难过,很心疼,心疼他,心疼我。 心疼他在我梦里哭的那...
    小阿涵i阅读 173评论 0 0
  • 工作效率 本身是一位追求高效的人,但为何一整天都在忙忙碌碌,工作效率却十...
    668c6729af67阅读 387评论 0 0