Angular2 - 单击按钮更新模型答案

【问题标题】：Angular2 - Update model on button clickAngular2 - 单击按钮更新模型
【发布时间】：2017-03-06 13:54:20
【问题描述】：

当使用 angular2 ngModel 进行双向数据绑定时：

<input [(ngModel)]="heroName">

有没有办法只在单击按钮后更新模型？或者能够取消用户对输入控件所做的更改？我知道另一种方法，我们可以将[(ngModel)] 拆分为[] 和()，并且仅在模糊或按下 Enter 键时更新输入等 - 但这不是我想要的。

我需要这种行为，因为用户必须能够取消更改。谢谢

【问题讨论】：

标签： angular angular-ngmodel

【解决方案1】：

您可以为此进行以下操作，

演示：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);
  }
}

【讨论】：

[()] 语法在未经您许可的情况下在内部更新模型。所以你应该选择其他方式。
这很有趣，也是我想要的。但是是否有另一种框架内置的方法，或者这是使用模板变量的唯一方法？
其他framework-built-in方式是什么意思？仅它的 Angular2 方式语法。我不确定，但我猜它最简单的方法是仅通过点击事件更新模型。
您说您已经研究过[]() 语法，所以我认为下一个解决方案是这样。

【解决方案2】：

您可以将“实时”数据与“有效”数据分开。

试试这样的：

<input [(ngModel)]="live.heroName">
<button (click)="save()">Save</button>
<button (click)="reset()">Reset</button>

还有控制器：

live = { heroName: '', heroPower: '' };
valid = { heroName: '', heroPower: '' };

save() {
    this.valid = Object.assign({}, this.live);
}

reset() {
    this.live = Object.assign({}, this.valid);
}

【讨论】：

这是我一直在考虑的，但是如果你必须对每个输入都这样做，它就会变得非常冗长。谢谢:)

【解决方案3】：

您可以为表单绑定属性创建一个新属性。

看起来像这样

<input [(ngModel)]="formHeroName" #change> <br>
{{selectedHeroName}}
<br>

更新模型取消

export class App implements OnInit {
selectedHeroName="Angular2";
formHeroName = "";

ngOnInit() {
  this.formHeroName = this.selectedHeroName;
}

update(){
  this.selectedHeroName= this.formHeroName;
}

cancel() {
  this.formHeroName = this.selectedHeroName;
}
}

例如查看 plunker - http://plnkr.co/edit/0QEubJDzlgs0CdnKrS8h?p=preview

【讨论】：

感谢您的回答。我一直在寻找一种无需引入新状态变量的方法。
不跟踪原始/更新变量之间的差异，您如何实现取消更改？