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 相关文章推荐
基于jQuery的图片剪切插件
Aug 03 Javascript
node.js中的require使用详解
Dec 15 Javascript
Javascript数据结构与算法之列表详解
Mar 12 Javascript
js性能优化技巧
Nov 29 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
深入学习AngularJS中数据的双向绑定机制
Mar 04 Javascript
jQuery表单对象属性过滤选择器实例详解
Sep 13 Javascript
node.js通过axios实现网络请求的方法
Mar 05 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
解决Vue打包后访问图片/图标不显示的问题
Jul 25 Javascript
layui数据表格重载实现往后台传参
Nov 15 Javascript
openlayers实现地图测距测面
Sep 25 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
虹吸壶煮咖啡26个注意事项
2021/03/03 冲泡冲煮
利用PHP函数计算中英文字符串长度的方法
2014/11/11 PHP
PHP生成指定随机字符串的简单实现方法
2015/04/01 PHP
Yii2.0实现的批量更新及批量插入功能示例
2019/01/29 PHP
利用javascript的面向对象的特性实现限制试用期
2011/08/04 Javascript
jquery Mobile入门—多页面切换示例学习
2013/01/08 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
Java中Timer的用法详解
2015/10/21 Javascript
js实现遍历含有input的table实例
2015/12/07 Javascript
JavaScript实现输入框(密码框)出现提示语
2016/01/12 Javascript
jQuery防止重复绑定事件的解决方法
2016/05/14 Javascript
jQuery 插件封装的方法
2016/11/16 Javascript
纯JS实现表单验证实例
2016/12/24 Javascript
jQuery实现级联下拉框实战(5)
2017/02/08 Javascript
Vue声明式渲染详解
2017/05/17 Javascript
AngularJS 异步解决实现方法
2017/06/12 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
nodejs模块学习之connect解析
2017/07/05 NodeJs
使用jQuery实现鼠标点击左右按钮滑动切换
2017/08/04 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
VUE+elementui面包屑实现动态路由详解
2019/11/04 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
2019/11/09 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
2020/02/02 Javascript
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
python实现的简单猜数字游戏
2015/04/04 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例
2020/03/06 Python
基于OpenCV的路面质量检测的实现
2020/11/04 Python
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
Nip + Fab官网:英国美容品牌
2019/08/26 全球购物
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
办公室务虚会发言材料
2014/10/20 职场文书
考试没考好检讨书(精选篇)
2014/11/16 职场文书
画展邀请函
2015/01/31 职场文书
Python机器学习算法之决策树算法的实现与优缺点
2021/05/13 Python