【Angular2】模板语法之 ngModel

NgModel实现双向绑定及其实现原理

讨论[(ngModel)]之前,先讲下属性绑定和事件绑定。

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

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

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

当开发一个数据录入表单的时候,我们常常希望既可以显示数据的属性值,当用户更改时,又可以更新数据的属性值。

NgModel指令可以帮我们实现这个需求:

    <input [(ngModel)]="currentHero.firstName">

改用属性绑定和事件绑定

 
<input [ngModel]="currentHero.firstName" (ngModelChange)="currentHero.firstName=$event">

在一般情况下直接使用[(ngModel)]实现双向数据绑定,有一些特殊情况,比如将用户的输入强制转换成大写字母。

<input [ngModel]="currentHero.firstName" (ngModelChange)="setUpperCaseFirstName($event)">

综上:其实在我们平常的使用当中,直接使用 [(ngModel)]完全可以满足双向数据绑定的要求,只有一些特殊情况下需要分开写法。

参考资料:
     http://www.jianshu.com/p/45482c299eba
    http://www.cnblogs.com/JennyLin77/p/6141124.html

 

猜你喜欢

转载自blog.csdn.net/chongchong1325/article/details/77040431