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中的for in循环和hasOwnProperty结合使用
Jun 05 Javascript
JavaScript利用append添加元素报错的解决方法
Jul 01 Javascript
jQuery实现视频作为全屏幕背景
Dec 18 Javascript
jQuery实现在列表的首行添加数据
May 19 Javascript
JS获取鼠标坐标位置实例分析
Jan 20 Javascript
一波JavaScript日期判断脚本分享
Mar 06 Javascript
javascript入门之window对象【新手必看】
Nov 22 Javascript
Vue学习笔记进阶篇之单元素过度
Jul 19 Javascript
AngularJS 中的数据源的循环输出
Oct 12 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
Apr 08 Javascript
基于vue cli 通过命令行传参实现多环境配置
Jul 12 Javascript
JavaScript面向对象继承原理与实现方法分析
Aug 09 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登录环节防止sql注入的方法浅析
2014/06/30 PHP
浅谈PHP各环境下的伪静态配置
2019/03/13 PHP
thinkPHP事务操作简单案例分析
2019/10/17 PHP
基于php解决json_encode中文UNICODE转码问题
2020/11/10 PHP
js小技巧--自动隐藏红叉叉
2007/08/13 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
2012/10/11 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
JavaScript将数据转换成整数的方法
2014/01/04 Javascript
js给网页加上背景音乐及选择音效的方法
2015/03/03 Javascript
详解addEventListener的三个参数之useCapture
2015/03/16 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
2015/05/25 Javascript
基于javascript简单实现对身份证校验
2021/01/25 Javascript
基于jquery实现轮播特效
2016/04/22 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
2017/07/28 Javascript
微信小程序实现全局搜索代码高亮的示例
2018/03/30 Javascript
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
2018/09/12 Javascript
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
2020/03/03 Javascript
python里将list中元素依次向前移动一位
2014/09/12 Python
python 实现自动远程登陆scp文件实例代码
2017/03/13 Python
详谈python read readline readlines的区别
2017/09/22 Python
解决pip install xxx报错SyntaxError: invalid syntax的问题
2018/11/30 Python
详解python之heapq模块及排序操作
2019/04/04 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
Python函数中的可变长参数详解
2019/09/12 Python
Python网络编程之使用TCP方式传输文件操作示例
2019/11/01 Python
Python 实现Numpy中找出array中最大值所对应的行和列
2019/11/26 Python
详解基于python的全局与局部序列比对的实现(DNA)
2020/10/07 Python
简短大学毕业感言
2014/01/18 职场文书
关爱留守儿童倡议书
2014/04/15 职场文书
团代会宣传工作方案
2014/05/08 职场文书
干部作风整顿个人剖析材料
2014/10/06 职场文书
酒店宣传语大全
2015/07/13 职场文书
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers