Angular 5的ngModel在不保存的情况下改变了UI中的值。
创始人
2024-10-15 22:31:11
0

问题描述:在Angular 5中使用ngModel时,即使在不保存的情况下,UI中的值也会被改变。

解决方法:

  1. 使用双向绑定的方式:ngModel通过[(ngModel)]指令实现双向数据绑定。可以使用一个变量来存储UI中的值,并在需要保存时将其与实际的数据模型进行同步。

在组件的类中定义一个变量,用于存储UI中的值:

valueFromUI: any; // 用于存储UI中的值

在模板中使用[(ngModel)]指令进行双向绑定:


在保存数据时,将valueFromUI与实际的数据模型进行同步:

saveData() {
  // 将valueFromUI的值保存到数据模型中
  this.dataModel = this.valueFromUI;
}
  1. 使用FormControl进行表单控制:使用FormControl可以更好地控制表单的值变化。在组件的类中,声明一个FormControl对象,并使用它来控制表单的值。

在组件的类中引入FormControl:

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

...
valueFromUI: FormControl = new FormControl(); // 使用FormControl来控制表单的值

在模板中使用FormControl对象来控制表单的值:


在保存数据时,通过FormControl对象来获取表单的值:

saveData() {
  // 将valueFromUI的值保存到数据模型中
  this.dataModel = this.valueFromUI.value;
}

以上是两种解决方法,根据具体的需求和项目的复杂度选择适合自己的方法。

相关内容

热门资讯

透视关于!aapoker辅助工... 透视关于!aapoker辅助工具安全吗(透视)werplan辅助软件,教程绝活儿(确实有挂)-哔哩哔...
德普之星辅助工具如何设置!we... 德普之星辅助工具如何设置!wepoker轻量版书签(透视)工具-一直教你真的有挂德普之星辅助工具如何...
wepoker怎么拿到好牌!w... wepoker怎么拿到好牌!wepokerplus透视脚本免费(透视)插件-确实解谜有挂1、超多福利...
透视专业!wepoker好友局... 透视专业!wepoker好友局透视(透视)wepoker透视最简单三个步骤,教程项目(有挂技术)-哔...
德普之星app安卓版破解版!w... 德普之星app安卓版破解版!we poker游戏下(透视)插件-竟然有挂有挂1、玩家可以在德普之星a...
透视关于!德州局透视(透视)约... 透视关于!德州局透视(透视)约局吧辅助器,教程大纲(有挂分享)-哔哩哔哩1、下载好约局吧辅助器脚本下...
hhpoker真的有透视吗!大... hhpoker真的有透视吗!大菠萝手游辅助(透视)教程-其实关于真的是有挂在进入hhpoker真的有...
透视揭露!wepoker私人局... 透视揭露!wepoker私人局透视(透视)约局吧能不能开挂,教程绝活(有挂方法)-哔哩哔哩约局吧能不...
德州局脚本!aapoker透视... 德州局脚本!aapoker透视方法(透视)app-总是解密有挂1)aapoker透视方法有没有挂:进...
透视揭幕!hhpoker透视实... 透视揭幕!hhpoker透视实战视频(透视)wepoker游戏的安装教程,教程资料(有挂透明挂)-哔...