Angular value与ngValue区别详解


Posted in Javascript onNovember 27, 2019

前言

在最近的项目中,需要用到 select 组件,之前 Angular 前台都是用现有的封装好的框架,一般都是从 Ctrl+cCtrl+v 的操作然后改一下就可以用,最近使用的 Bootstrap 原生样式,所以一切都得自己写,但是这样也有好处的,不会受框架的局限性。

Angular value与ngValue区别详解

组件

ts部分代码:

input 输入, output 输出

@Input()
 set college(value: College) {
  this.innerCollege = value;
 }

 get college(): College {
  return this.innerCollege;
 }

 private innerCollege: College;

 @Output()
 collegeSelect: EventEmitter<College> = new EventEmitter();
 
 .........
 
  public change(college: College): void {
  this.collegeSelect.emit(college);
 }

Html:

<select [compareWith]="comparedWithId" class="form-control" [(ngModel)]="college" (change)="change(college)">
 <option value="-1" >请选择学院...</option>
 <option *ngFor="let _college of colleges" [value]="_college">{{_college.name}}</option>
</select>

问题

在发送请求时,向后台发送 Post 请求时发生错误,并提示状态码为 400

Angular value与ngValue区别详解

出现 400

的状态码的错误一般有两种:

1、语义有误,当前请求无法被 服务器 理解。除非进行修改,否则客户端不应该重复提交这个请求。

2、请求参数有误。

在看一下向后台发送数据为 [Object Object]

Angular value与ngValue区别详解

很明显我们这就是第二种请求参数错误,应该是传过去一个 College 对象,而我们传过去了一个 [Object Object]

原因

为什么会出现这个原因呢,在大家看来 [Object Object] 是不是也是一个对象?

在控制台打印,发现传过去的 College 就是 [Object Object]

Angular value与ngValue区别详解

为什么会这样显示呢,感觉怪怪的,不是应该显示 JSON 格式的对象么?

google 一下问题迎刃而解,在 stackoverflow 有详细的解释

Angular value与ngValue区别详解

[value]="..." 仅支持字符串值
[ngValue]="..." 支持任何类型

所以 value 仅支持串字符串,不支持传对象,如果使用 value 传对象,然而不会得到正确的解析,就得到了我们看到的 [Object Object]

修改为ngValue

<select [compareWith]="comparedWithId" class="form-control" [(ngModel)]="college" (change)="change(college)">
 <option value="-1" >请选择学院...</option>
 <option *ngFor="let _college of colleges" [ngValue]="_college">{{_college.name}}</option>
</select>

控制台打印:

Angular value与ngValue区别详解

现在看来是我们想要的数据!!!

在次发送请求,状态码 200 成功

Angular value与ngValue区别详解

Angular value与ngValue区别详解

数据也是正确的!!没有问题!!

总结

感觉之前还是太依赖于框架,没有深究 ValuengValue 有什么不同,框架里用 Value 就直接复制过去,框架都是封装好的,导致现在自己用到了,不知道怎么写的了。

用框架也有好处,既方便又省时间,什么都是现成的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript使用eval或者new Function进行语法检查
Oct 16 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
Apr 21 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
Aug 26 Javascript
js+css实现tab菜单切换效果的方法
Jan 20 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
Apr 03 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
Apr 23 Javascript
深入理解node exports和module.exports区别
Jun 01 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
Feb 28 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
Jan 05 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
Feb 10 Javascript
javascript实现简易的计算器
Jan 17 Javascript
gojs实现蚂蚁线动画效果
Feb 18 Javascript
原生js实现二级联动菜单
Nov 27 #Javascript
微信小程序wxml列表渲染原理解析
Nov 27 #Javascript
原生js实现下拉选项卡
Nov 27 #Javascript
浅析Vue下的components模板使用及应用
Nov 27 #Javascript
d3.js 地铁轨道交通项目实战
Nov 27 #Javascript
微信小程序表单验证WxValidate的使用
Nov 27 #Javascript
vue(2.x,3.0)配置跨域代理
Nov 27 #Javascript
You might like
PDO防注入原理分析以及使用PDO的注意事项总结
2014/10/23 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
php微信公众号开发(4)php实现自定义关键字回复
2016/12/15 PHP
PHP用PDO如何封装简单易用的DB类详解
2017/07/30 PHP
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
javascript下IE与FF兼容函数收集
2008/09/17 Javascript
jQuery+ajax实现顶一下,踩一下效果
2010/07/17 Javascript
jQuery右键菜单contextMenu使用实例
2011/09/28 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
2015/07/08 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
2015/08/17 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
2016/05/17 Javascript
JS对象的深度克隆方法示例
2017/03/16 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
2017/03/24 jQuery
JS实现的添加弹出层并完成锁屏操作示例
2017/04/07 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
2018/08/29 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
2019/09/26 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
JS代码检查工具ESLint介绍与使用方法
2020/02/04 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
2020/02/11 Javascript
微信小程序实现多图上传
2020/06/19 Javascript
React Ant Design树形表格的复杂增删改操作
2020/11/02 Javascript
浅析python 内置字符串处理函数的使用方法
2014/06/11 Python
Python通过future处理并发问题
2017/10/17 Python
Python下载网络小说实例代码
2018/02/03 Python
基于Python打造账号共享浏览器功能
2019/05/30 Python
django的csrf实现过程详解
2019/07/26 Python
DNA测试:Orig3n
2019/03/01 全球购物
写好求职信第一句话的技巧
2013/10/26 职场文书
学期自我鉴定
2013/11/04 职场文书
资助贫困学生倡议书
2014/05/16 职场文书
优秀应届毕业生自荐书
2014/06/29 职场文书
教师节老师寄语
2015/05/28 职场文书
Golang二维切片初始化的实现
2021/04/08 Golang