Angular4中下拉框selected属性与ngValue(value)属性互斥如何解决?

在做个人信息修改的时候遇到了一个问题:部分下拉框的option内容是由后端通过json传递过来的,格式大概为:

{
"arriveTime":
{
"id":150,
"name":"待定",
"sort":1
},
{
"id":151,
"name":"立即",
"sort":2,
"selected":true
}
}
于是我把该实体通过循环填充:

<div class="area-int">
  <select formControlName="arriveTime">
    <option *ngFor="let a of resume.arriveTimeDic" [selected]="a.selected" [ngValue]="a">
      {{a.name}}
    </option>
  </select>
</div>

结果发现只要有ngValue或是value属性存在,selected就会失效。使用ngValue的意图是,因为后端需要我同时把id和name两个字段都传过去。我使用另一种方式也同样没有效果:

<div class="area-int">
  <select formControlName="arriveTime">
    <option *ngFor="let a of resume.arriveTimeDic" [selected]="a.selected" [value]="a.name">
      {{a.name}}
      <input formControlName="arriveTimeId" [value]="a.id">
    </option>
  </select>
</div>

搜索未果,特向大神们请教,小白自学,感激不尽!

0

1个回答

 搞不懂,既然是用angular4,那页面节点的属性定义怎么会和后端挂上勾呢,与后端交互的都在ts代码的http请求调用中,与前端模板有什么关系。
0
danielinbiti
danielinbiti 回复微雨燕凝霜寒: <div class="area-int"> <select formControlName="arriveTime" [(ngModel)]="定义个a对象,就是选中的值"> <option *ngFor="let a of resume.arriveTimeDic" [ngValue]="a,a中如果有value值是最简单的"> {{a.name}} </option> </select> </div>
一年多之前 回复
xu1227233860
微雨燕凝霜寒 谢答!是这样的,我的表单验证都放在了ts里面,因为验证方面不需要做太多要求,所以我没把ts代码贴出。按照以往一个表单控件传输一个填写项的话是不存在其他问题的,但现在后端要我在选择一个option的同时,把该option对应的实体其中的两个属性值都返回过去。这时我就遇到了问题,如果同时传输两个属性值,那option的selected属性就会失效,如果想要使用selected就不能添加value属性。
一年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
关于html页面调式select下拉框的时候,被选中的没有加入selected属性
今天做前端页面调试的时候,发现一个很有意思的问题:rn选了下拉框的某个值后,对应的没有出现selected属性。rn按理说应该是这样的:rn selected属性表示被选中的意思。rnrnrnrnrn这是一个调试的现象,不要认为它是错误的,因为js里面是可以获取谁被选中的。rn经验之谈,有些东西,需要慢慢的积累。
动态回显select中的option 动态添加selected属性
var id = "";n var name = "";n var selectedStarInfoId = '${starNews.starInfoId}';n// alert(selectedStarInfoId);n _findStarInfo();nn function _findStarInfo(){n jQuery.ajax({n
下拉框使用c:if标签进行判断然后使用selected属性实现选择状态
是否付款:rn            请选择rn            rn                已付款rn                未付款rn            rn            rn                未付款rn                已付款
(jquery)select中的option有selected属性但是没有选中
设置select中option的选中状态nn用来设置value为xx的项选中n通过点击事件给select设置不同的option选中状态,点击多次之后效果失效:n不使用:n$(&quot;#select&quot;).find(&quot;option&quot;).removeAttr(&quot;selected&quot;)n$(&quot;#fselect&quot;).find(&quot;option[value = ' ').at...
Html Select 使用selected属性设置默认选择项
Html Select 如何进行默认选择,只要给某个option 添加 selected = selected"属性就是默认选项rn rn全部 rn通过 rn未通过 rn rnrnrn则“通过”为默认选中。
关于有时select下拉表单selected设置无效的解决方案
autocomplete="off">n --请选择--
原生js获取select下拉框的selected的option项
n n n 一. 使用 原生js,获取select标签下属性有selected的option项。nnn先写一个select标签如下:n&amp;lt;select id=&quot;selectBox&quot;&amp;gt;n &amp;lt;option value=&quot;VALUE-aaa&quot; selected&amp;gt;n TEXT-aaaaan &amp;lt;/option...
select下拉框默认选中selected属性不起作用
rn 问题:rnrn问题:使用select写的下拉菜单对默认选选中的option项设置selected=&amp;quot;selected&amp;quot;属性,不起作用,没有实现默认选中。rnrn 分析:rnrn分析:使用谷歌浏览器打开页面时,selected=&amp;quot;selected&amp;quot;默认选中事件有效。当使用火狐浏览器打开刷新页面后显示的是上一次关闭时选中的option选项,默认选中属性selected=&amp;quot;selected&amp;quot;失效。rn
el表达式设置option标签selected
el表达式设置option标签selected
Jquery 根据value值设置下拉列表(select)默认选中项
$("#selIndustyType option[value='1']").attr("selected", "selected");
jquery设置下拉框selected不起作用
在js中设置下拉框被选中:nn最初写法:nn//将value值为value的设为selectednn$("#selected").find("option[value=]+value+"]").attr("selected",true);nn来回切换几次后发现selected不起作用了。nn上网查询原来是浏览器兼容性的问题:将写法改为以下的写法就可以了nn$("#selec
Angular4_动态启用禁用select
 nnn &amp;lt;select class=&quot;form-control customSelect&quot; [(ngModel)]=&quot;packagingType&quot; [ngClass]=&quot;{'disableSelect' : isBulkToteMaterial}&quot; name=&quot;packagingType&quot; (change)=&quot;packagTypeChange(packagingtype.value)&quot; #..
求解,利用flask语法,怎样动态设置HTML5中option标签中的selected属性????求帮助,谢谢大家
利用flask的if 语句,option标签满足条件时, 设置selected属性
angular4中获取select选中的值
html:&amp;lt;li class=&quot;col-md-6&quot;&amp;gt;n &amp;lt;label&amp;gt;队长:&amp;lt;/label&amp;gt;n &amp;lt;select class=&quot;form-control selectpicker show-tick&quot; name=&quot;leader&quot;n data-first-option=&quot;false&quot; required data-l
js获取select标签选中的值
js获取select选中的值nnnvar obj = document.getElementByIdx_x(”testSelect”); //定位idnnvar index = obj.selectedIndex; // 选中索引nnvar text = obj.options[index].text; // 选中文本nnvar value = obj.options[index].value; ...
网页制作select属性切换,得到所选择的value
    最近自己在做一个简单的网页课程表显示,刚开始时不知道怎么根据点击的select周数的改变,显示出想要的对应周数的课表。 &amp;lt;select id=&quot;1到4&quot; onchange=&quot;haha(this.options[selectedIndex].value)&quot;&amp;gt;n &amp;lt;option value=&quot;第 1周&quot;&amp;gt;第 1周&amp;lt;/option&amp;gt;n ..
怎样用JS给,option添加“选中”属性
rn n&amp;lt;html&amp;gt;  n&amp;lt;head&amp;gt;  n    &amp;lt;script&amp;gt;  n    window.onload = function(){  n         var opts = document.getElementById(&quot;select&quot;);  n         var value = 2//这个值就是你获取的值;  n    if(value!=...
Angular4_Select选择改变事件
Angular4_Select选择改变事件rn、rn个人感觉change没用。rn所以用的ngModelChangernrnrnrnrnselectrnclass="form-control customSelect" [(ngModel)]="packagingType"rnname="packagingType" (ngModelChange)="packagTypeChange()">rno
怎么动态的设置select标签中option选项的selected属性
var selyear = $("#theyear");n var now = new Date();n var map = document.getElementById("nian").value;n var year = now.getFullYear(); //获取当前年n for (var start = 2015; start <= year;
前端下拉控件select的备选项option标签的属性key和value以及标签值的区别
说明:“标签值”指&amp;lt;option&amp;gt;&amp;lt;/option&amp;gt;标签之间的值,例如&amp;lt;option&amp;gt;Hello&amp;lt;/option&amp;gt;,标签值为“Hello”。nnkey属性用于区别不同的&amp;lt;option&amp;gt;,多个key值不能重复,通常取Id作为key值。nnvalue属性是选中某一项之后,&amp;lt;select&amp;gt;控件的返回值,通常也取Id作为value的值...
通过js来实现select标签中哪个option处于选中状态
方法1:rnrn function window::onload() {rn select();rn }rn function select()rn {rn var length;rn var aa = [color=red]&quot;&quot;;[/color]rn length = document.FormName.selectName.length;rn alert(length);rn f...
有关在html中修改select标签的option selected默认选中属性实现
着急想要解决办法的朋友可以直接看最后的内容:}一般我们使用select标签时大概都会使用到option标签来填充下拉框中的内容只有几个固定的内容写死在页面还好,可能是这样的: &amp;lt;select name=&quot;type&quot;type=&quot;text&quot;&amp;gt;                                    &amp;lt;option velue= &quot;&quot;&amp;gt;type&amp;lt;/opt...
下拉框onchange方法传递option自定义属性
更新记录:rn2018.1.24,添加了jquery获取option自定义属性的方法rn——————————————————————————————————————————rn1 传递option的value值rnrnonchange="方法名(this.value)" 或者nonchange="方法名(options[this.options.selectedIndex].value)rnrn
C# js select给选中的项加上selected
$("#ddlA").change(function () {rn                var auth = $("#ddlA").val();rn                $("#ddlA option[value=" + auth + "]").attr("selected", "selected");rn               rn })
ng-modle对select下拉选项的影响
事件背景开发技术是AngularJs,上周五,开发页面的时候,有个下拉选框(select),用ng-modle绑定了一个值A,选项是在另外一个数组B里面的内容,做成的页面里下拉选框中总有一个空白项,选中其他的选项以后,空白项有消失了,给人的感觉很不好。所以就这个专题尝试了一下。代码(代码的风格可能不太好,请路过大大多指点(:3/L)) n首先是html:<!DOCTYPE html>n<html>
vue 更改计算属性后select选中值不更改的解决方法
先上代码://...n<body>n <div id="qwe">n <select v-model="selected">n <option v-for="item in da" :value="item.value">{{item.value}}</option>n </select>n <span>{{selected}}<
tp5下拉菜单默认选中(内置标签,volist)
/**n * @todo n * $info.brand_state是后端定义变量n * $vo是标签循环的value值n * 通过eq标签来比对是否一致进行默认选中状态n */n{volist name=&quot;brand_state_config&quot; id=&quot;vo&quot; key=&quot;k&quot;}n {eq name=&quot;vo&quot; value=&quot;$info.brand_state&quot;}n &amp;lt;op..
ie 在select中,option 默认显示空的不管用,angular4
&amp;lt;option selected=&quot;selected&quot; disabled=&quot;disabled&quot;  style='display: none' value=''&amp;gt;&amp;lt;/option&amp;gt;   disabled=&quot;disabled&quot;   这个不能加,加的话在首次加载会忽略掉。
关于select标签的value
我们知道在网页开发中只有 input、textarea、select三种类型的标签value属性的值才会提交给服务器。如,input标签有title、type、disabled等属性,但是这些属性都是供显示用的,用户并不能修改。rn对于input、textarea标签其value中非常明显,input在定义的时候写死了,而textarea标签的value值很好界定(用户写入的即是其value)。但
jQuery获取select中选中的option的值和自定义属性的值
使用jQuery获取获取select下拉框中option的值://通过绑定change事件,当下拉框内容发生变化时事件被启动n$("#wlms").bind("change",function(){n //获取被选中的option的值n var miaoshu = $(this).val();n //获取自定义属性的值n var bianhao
select 标签重置
select标签重置
angular4中ngModel双向绑定在限制输入情况下与value值不一致的问题及尝试的解决方法
近期公司的一个后台项目在使用angular4进行开发,随着项目的推进和迭代开发,需要对有的input框的value值进行限制输入,例如目前项目的一些input框只允许输入数字和'.' 这两种形式的内容。就在input标签的中添加了(keyup)属性,将相应的ts文件中编写的一个正则验证方法赋值给该属性,以便进行验证,如下所示:nn元/次 {{normal.price}} ||| {{price
使用jQuery获取select的length属性致错
有这样一段代码<form>n<select id="mySelect">n <option>Apple</option>n <option>Pear</option>n <option>Banana</option>n <option>Orange</option>n</select>n</form>我想用jQuery来得到select标签下option的数量。于是就添加了一段代码<scri
Angular4_select设置默认选中
Angular4_select设置默认选项
Angular4中的输出属性
Angular4中的输出属性当子组件需要向父组件传递信息时需要用到输出属性。 n举个栗子:当我们从股票交易所获得股票的实时价格时,希望外部也可以得到这个信息。为了方便,这里的实时股票价格我们通过一个随机数来模拟。这里的子组件我们叫它app.price.quote使用EventEmitter从子组件向外发射事件price.quote.tsexport class PriceQuoteComponent
vue2.0 下拉框默认标题设置
昨天到今天,用vue2.0在写一个性别选择框,一给option添加seledted属性就报错selected 已经绑定在<select></select> 上了 , 你选择了哪个选项, selected 就是那个选项的value了 ,你想让哪个选项为默认选中的话,就在data里的seleced 设置为那个选项的value在单击<select></select> 时,给’性别’这个选项添加一个disa
Angular4--【数据绑定】
数据绑定nnnn事件绑定nnnnnn属性绑定nn很多人对于DOM属性还是HTML属性易混,那我们首先来区分一下HTML和DOM;nnn少量的HTML和DOM属性之前存在着1:1的映射,比如id;n有些HTML属性没有对应的DOM属性;n有些DOM属性没有对应的HTML属性,比如textComtent;n即使是名字相同,HTML属性和DOM属性也不是同一个东西;nHTML属性的值制定了初始值;DOM...
jquery选择select标签选中的option的title值
比如知道select的ID为testid,要获得选中的option的title值,那么可以用下面代码。nn$("#testid option:selected").attr("title")n也可以用:n$("#testid").find("option:selected").attr("title")nn如果绑定事件的那么用:n$(this).find("option:select
下拉框出现多个option同时选中(attr/prop)
            1.如上图所示,,项目中由于代码复用情况,造成下拉框的选中会同时出现多个selected选中情况,起初为了解决这种问题,改用了唯一标识ID,怀疑可能是name多处使用的问题,后来这种问题出现次数过多,开始怀疑自己是不是哪一部分代码有误.          2. 查看代码,怎么看都没有大问题啊,将attr,改为prop,发现没有出现类似问题,一切正常,继续深挖,发现attr与...
Vue.js获取被选择的option的value和text值
1.获取option的value的值,watch option 控件时,或自动获取option的value的值。2.获取被选中的option的text的值时,使用:$(&quot;#optionID option:selected&quot;).text
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 数据库课程属性 数据库课程属性