Angular value与ngValue区别详解

2024-12-13 00:40:53

前言

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

组件

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

出现 400

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

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

2、请求参数有误。

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

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

原因

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

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

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

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

[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>

控制台打印：

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

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

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

总结

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

angularjs 获取默认选中的单选按钮的value方法

在Html页面中,有三个单选按钮,默认选中的是第二个"重要"这个选项,设置ng-checked="true",把该选项默认选中,可是在提交表单时,却提示$scope.level为undefine状态,明明默认选中了为什么却是undefine呢? 于是,先测试了一把:在Html页面写下下面的代码: <span style="font-size:18px;"><div ng-controller="testCtrl&quo
AngularJS constant和value区别详解

angularJS可以通过constant(name,value)和value(name,value)对于创建服务也是很重要的. 相同点是:都可以接受两个参数,name和value. 区别: 1.constant(name,value)可以将一个已经存在的变量值注册为服务,并将其注入到应用的其他部分中.其中,name为注册的常量的名字,value为注册的常量的值或对象. 举例: (1)value为值时: angular.module('myApp') .constant('apiKey','12
AngularJS基础 ng-value 指令简单示例

AngularJS ng-value 指令 AngularJS 实例设置输入框的值: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <b
Angular 4依赖注入学习教程之ValueProvider的使用（七）

学习目录 Angular 4 依赖注入教程之一依赖注入简介 Angular 4 依赖注入教程之二组件服务注入 Angular 4 依赖注入教程之三 ClassProvider的使用 Angular 4 依赖注入教程之四 FactoryProvider的使用 Angular 4 依赖注入教程之五 FactoryProvider配置依赖对象 Angular 4 依赖注入教程之六 Injectable 装饰器 Angular 4 依赖注入教程之七 ValueProvider的使用 Angular
angular 实时监听input框value值的变化触发函数方法

用angulajs + ionic 做了一个登陆页面.效果要通过监听输入框的变化来判断登陆按钮是否可点击.当至少一个输入框为空时登录按钮不可点击.一开始是用的jquery的方法做的,后来发现刷新当前页可以实现效果,但是当经过路由跳转后再回到登陆页后,方法就被执行了. 后来经过查找资料,利用angular.js的$watch方法解决了. 代码大概如下: $scope.input = {//初始化,避免ng-model绑定取不到值 Tel:'', Pwd:'' } $scope.$watch('in
Angular.JS中select下拉框设置value的方法

前言本文主要给大家介绍的是关于Angular.JS中select下拉框设置value的相关内容,非常出来供大家参考学习,下面来一起看看详细的介绍: 最近在系统中增加一个查询的筛选条件,通过下拉框选取,用的是Angular常见的ng-options 指令: <select id="selectDetectUnit" class="form-control" ng-model="detectUnits" ng-options="de
Angular使用ControlValueAccessor创建自定义表单控件

在 Angular 自定义表单控件,有时你想要的输入不是标准的文本输入.选择或复选框.通过实现ControlValueAccessor 接口并将组件注册为 NG_VALUE_ACCESSOR,您可以将自定义表单控件无缝地集成到模板驱动或响应表单中,就像它是本地表单一样! ControlValueAccessor ControlValueAccessor 是一个接口,充当Angular API 和 DOM 元素之间的桥梁 ControlValueAccessor 是一个连接表单模型和视图(DOM元
Angular value与ngValue区别详解

前言在最近的项目中,需要用到 select 组件,之前 Angular 前台都是用现有的封装好的框架,一般都是从 Ctrl+c 到 Ctrl+v 的操作然后改一下就可以用,最近使用的 Bootstrap 原生样式,所以一切都得自己写,但是这样也有好处的,不会受框架的局限性. 组件 ts部分代码: input 输入, output 输出 @Input() set college(value: College) { this.innerCollege = value; } get college(
Angular 中 select指令用法详解

最近在angular中使用select指令时,出现了很多问题,搞得很郁闷.查看了很多资料后,发现select指令并不简单,决定总结一下. select用法: <select ng-model="" [name=""] [required=""] [ng-required=""] [ng-options=""]> </select> 属性说明: 发现并没有ng-change属性 ng-
JS处理数据四舍五入(tofixed与round的区别详解)

1 .tofixed方法 toFixed() 方法可把 Number 四舍五入为指定小数位数的数字.例如将数据Num保留2位小数,则表示为:toFixed(Num):但是其四舍五入的规则与数学中的规则不同,使用的是银行家舍入规则,银行家舍入:所谓银行家舍入法,其实质是一种四舍六入五取偶(又称四舍六入五留双)法.具体规则如下: 简单来说就是:四舍六入五考虑,五后非零就进一,五后为零看奇偶,五前为偶应舍去,五前为奇要进一. 显然这种规则不符合我们平常在数据中处理的方式.为了解决这样的问题,可以自定义
基于angular中的重要指令详解($eval,$parse和$compile)

在angular的服务中,有一些服务你不得不去了解,因为他可以说是ng的核心,而今天,我要介绍的就是ng的两个核心服务,$parse和$compile.其实这两个服务讲的人已经很多了,但是100个读者就有100个哈姆雷特,我在这里讲讲自己对于他们两个服务的理解. 大家可能会疑问,$eval呢,其实他并不是一个服务,他是scope里面的一个方法,并不能算服务,而且它也基于parse的,所以只能算是$parse的另一种写法而已,我们看一下ng源码中$eval的定义是怎样的就知道了 $eval: fu
基于python中staticmethod和classmethod的区别(详解)

例子 class A(object): def foo(self,x): print "executing foo(%s,%s)"%(self,x) @classmethod def class_foo(cls,x): print "executing class_foo(%s,%s)"%(cls,x) @staticmethod def static_foo(x): print "executing static_foo(%s)"%x a=A(
Oracle10个分区和Mysql分区区别详解

Oracle10g分区常用的是:range(范围分区).list(列表分区).hash(哈希分区).range-hash(范围-哈希分区).range-list(列表-复合分区). Range分区:Range分区是应用范围比较广的表分区方式,它是以列的值的范围来做为分区的划分条件,将记录存放到列值所在的range分区中. 如按照时间划分,2010年1月的数据放到a分区,2月的数据放到b分区,在创建的时候,需要指定基于的列,以及分区的范围值. 在按时间分区时,如果某些记录暂无法预测范围,可以创建m
基于DOM节点删除之empty和remove的区别(详解)

要移除页面上节点是开发者常见的操作,jQuery提供了几种不同的方法用来处理这个问题,这里我们开仔细了解下empty和remove方法 empty 顾名思义,清空方法,但是与删除又有点不一样,因为它只移除了指定元素中的所有子节点. 这个方法不仅移除子元素(和其他后代元素),同样移除元素里的文本.因为,根据说明,元素里任何文本字符串都被看做是该元素的子节点.请看下面的HTML: <div class="hello"><p>这是p标签</p></
Angular表单验证实例详解

表单验证我去,我感觉我这个人其实还是一个很傻逼的一个人,老是因为拼错了一个单词或者怎么样就浪费我很长时间,这样真的不行不行,要正确对待这个问题,好了,说正题吧,angular也有表单验证minlength,maxlength,required呀这些个东西,还有也支持h5的那些验证,h5的那些验证,就是type啦,type='email',number,url呀这些,然后现在要用angular来验证,可以定义样式哈,不错,然后怎么验证呢,好的上代码 <!DOCTYPE html> <ht
Angular中的$watch方法详解

在$apply方法中提到过脏检查,首先apply方法会触发evel方法,当evel方法解析成功后,会去触发digest方法,digest方法会触发watch方法. (1)$watch简介在digest执行时,如果watch观察的的value与上一次执行时不一样时,就会被触发. AngularJS内部的watch实现了页面随model的及时更新. $watch方法在用的时候主要是手动的监听一个对象,但对象发生变化时触发某个事件. (2)watch方法用法 $watch(watchFn,watch

Angular value与ngValue区别详解

相关推荐

随机推荐