Angular2-单击按钮更新模型 [英] Angular2 - Update model on button click
问题描述
在将angular2 ngModel用于双向数据绑定时:
<input [(ngModel)]="heroName">
有没有一种方法只能在单击按钮后更新模型?还是可以取消用户对输入控件所做的更改?我知道另一种方法,我们可以将[(ngModel)]
分为[]
和()
,并且仅在模糊或按Enter键等时更新输入-但这不是我想要的.>
我需要这个行为,因为用户必须能够取消更改. 谢谢
您可以为此执行以下操作,
演示: http://plnkr.co/edit/OW61kGGcxV5MuRlY8VO4?p=preview
{{heroName}}<br>
<input [ngModel]="heroName" #change> <br>
<br>
<button (click)="update(change.value)">Update Model</button>
export class App {
heroName="Angular2";
update(value){
console.log('value before button click' + this.heroName);
this.heroName=value;
console.log('value after button click' + this.heroName);
}
}
When using the angular2 ngModel for two-way data binding:
<input [(ngModel)]="heroName">
Is there a way to only update the model once a button is clicked? Or be able to cancel the changes that the user made to the input control? I am aware of the other approach where we can split the [(ngModel)]
in its []
and ()
and only update the input on blur or when the Enter key is pressed etc - but this is not what I want.
I need this behavious because, the user must be able to cancel the changes. Thanks
You can do following for that,
DEMO : http://plnkr.co/edit/OW61kGGcxV5MuRlY8VO4?p=preview
{{heroName}}<br>
<input [ngModel]="heroName" #change> <br>
<br>
<button (click)="update(change.value)">Update Model</button>
export class App {
heroName="Angular2";
update(value){
console.log('value before button click' + this.heroName);
this.heroName=value;
console.log('value after button click' + this.heroName);
}
}
这篇关于Angular2-单击按钮更新模型的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!