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 相关文章推荐
二级域名转向类
Nov 09 Javascript
JavaScript多线程的实现方法
May 08 Javascript
JavaScript中的Screen屏幕对象
Jan 16 Javascript
为javascript添加String.Format方法
Aug 11 Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
Jul 31 Javascript
提交按钮的name='submit'引起的js失效问题及原因
Feb 25 Javascript
js限制文本框的输入内容代码分享(3类)
Aug 20 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
Aug 22 Javascript
微信小程序--组件(swiper)详细介绍
Jun 13 Javascript
简单谈谈原生js的math对象
Jun 27 Javascript
开发用到的js封装方法(20种)
Oct 12 Javascript
javascript实现贪吃蛇小游戏
Jul 28 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
如何将一个表单同时提交到两个地方处理
2006/10/09 PHP
PHP+JS+rsa数据加密传输实现代码
2011/03/23 PHP
如何使用FireFox插件FirePHP调试PHP
2013/07/23 PHP
php创建无限级树型菜单
2015/11/05 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
对联广告js flash激活
2006/10/19 Javascript
用 JavaScript 迁移目录
2006/12/18 Javascript
网上抓的一个特效
2007/05/11 Javascript
比较全的JS checkbox全选、取消全选、删除功能代码
2008/12/19 Javascript
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
浅析jQuery中常用的元素查找方法总结
2013/07/04 Javascript
js修改原型的属性使用介绍
2014/01/26 Javascript
JavaScript中SetInterval与setTimeout的用法详解
2015/11/10 Javascript
jquery事件的ready()方法使用详解
2015/11/11 Javascript
js实现网页收藏功能
2015/12/17 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
JavaScript面试题(指针、帽子和女朋友)
2016/11/23 Javascript
函数四种调用模式以及其中的this指向
2017/01/16 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
微信小程序绘制图片发送朋友圈
2019/07/25 Javascript
Python标准库与第三方库详解
2014/07/22 Python
python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)
2017/12/20 Python
python生成器推导式用法简单示例
2019/10/08 Python
python判断正负数方式
2020/06/03 Python
OpenCV 使用imread()函数读取图片的六种正确姿势
2020/07/09 Python
详解python metaclass(元类)
2020/08/13 Python
详解CSS中iconfont的使用
2015/08/04 HTML / CSS
《小白兔和小灰兔》教学反思
2014/02/18 职场文书
上课看小说检讨书
2014/02/22 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
优质服务口号
2014/06/11 职场文书
校园文明标语
2014/06/13 职场文书
践行三严三实心得体会
2014/10/13 职场文书
幼儿园小班开学寄语
2015/05/27 职场文书
教您:房贷工资收入证明应该怎么写?
2019/08/19 职场文书
浅谈Node的内存泄露问题
2022/05/06 NodeJs