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 EasyUI 的EasyLoader功能介绍
Sep 12 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
Oct 17 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
JavaScript表格常用操作方法汇总
Apr 15 Javascript
javascript获取文档坐标和视口坐标
May 26 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
Jun 01 Javascript
Bootstrap字体图标无法正常显示的解决方法
Oct 08 Javascript
JavaScript寄生组合式继承原理与用法分析
Jan 11 Javascript
小程序转发探索示例
Feb 19 Javascript
DatePickerDialog 自定义样式及使用全解
Jul 09 Javascript
vue.js实现简单的计算器功能
Feb 22 Javascript
JavaScript中的各种宽高属性的实现
May 08 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
PHP 解决utf-8和gb2312编码转换问题
2010/03/18 PHP
PHP实现Javascript中的escape及unescape函数代码分享
2015/02/10 PHP
php单例模式示例分享
2015/02/12 PHP
PHP环境中Memcache的安装和使用
2015/11/05 PHP
PHPWind9.0手动屏蔽验证码解决后台关闭验证码但是依然显示的问题
2016/08/12 PHP
认识延迟时间为0的setTimeout
2008/05/16 Javascript
js特殊字符过滤的示例代码
2014/03/05 Javascript
js限制input标签中只能输入中文
2015/06/26 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
2015/11/01 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
2016/08/19 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
2016/09/06 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
vue 设置proxyTable参数进行代理跨域
2018/04/09 Javascript
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
[55:48]VGJ.S vs TNC Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Python二分法搜索算法实例分析
2015/05/11 Python
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
编写Python脚本把sqlAlchemy对象转换成dict的教程
2015/05/29 Python
Python数据结构与算法之常见的分配排序法示例【桶排序与基数排序】
2017/12/15 Python
Python编程argparse入门浅析
2018/02/07 Python
python实现人脸识别经典算法(一) 特征脸法
2018/03/13 Python
Python实现的本地文件搜索功能示例【测试可用】
2018/05/30 Python
Pytorch中index_select() 函数的实现理解
2019/11/19 Python
总结python 三种常见的内存泄漏场景
2020/11/20 Python
乌克兰移动电子产品和相关配件的在线商店:iTMag
2020/03/16 全球购物
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
集体婚礼证婚词
2014/01/13 职场文书
幼儿园中班下学期评语
2014/04/18 职场文书
银行进社区活动总结
2014/07/07 职场文书
2015年全国爱耳日活动总结
2015/02/27 职场文书
2015企业年终工作总结范文
2015/05/27 职场文书
人间正道是沧桑观后感
2015/06/15 职场文书
无故旷工检讨书
2015/08/15 职场文书
解决pytorch 损失函数中输入输出不匹配的问题
2021/06/05 Python
java调用Restful接口的三种方法
2021/08/23 Java/Android