问题描述:在Angular 5中使用ngModel时,即使在不保存的情况下,UI中的值也会被改变。
解决方法:
在组件的类中定义一个变量,用于存储UI中的值:
valueFromUI: any; // 用于存储UI中的值
在模板中使用[(ngModel)]指令进行双向绑定:
在保存数据时,将valueFromUI与实际的数据模型进行同步:
saveData() {
// 将valueFromUI的值保存到数据模型中
this.dataModel = this.valueFromUI;
}
在组件的类中引入FormControl:
import { FormControl } from '@angular/forms';
...
valueFromUI: FormControl = new FormControl(); // 使用FormControl来控制表单的值
在模板中使用FormControl对象来控制表单的值:
在保存数据时,通过FormControl对象来获取表单的值:
saveData() {
// 将valueFromUI的值保存到数据模型中
this.dataModel = this.valueFromUI.value;
}
以上是两种解决方法,根据具体的需求和项目的复杂度选择适合自己的方法。