关于在angular4.X里使用select默认选择和选中满足条件的option

分享者
• 阅读 4592

angular4里使用select一般如下:

<select class="form-control" required name="actionType" [(ngModel)]="searchParams.actionType">
          <option value="">请选择操作动作</option>
          <option *ngFor="let item of actionTypes" [value]="item.name">{{item.desc}}</option>
        </select>

其中vaule可以换成ngValue。
第一个option的value为空,这样可以在其他option没有selected时让其默认被选中。

默认选中第一个自定义的选项这里已经实现啦,但是如果我们想默认选中的是ngFor里循环出来的并且满足条件的option怎么办呐。

如果我们只是给满足条件的option添加[selected]=true,你会发现并不能实现,如:

<select class="form-control" required name="actionType" [(ngModel)]="searchParams.actionType">
          <option value="">请选择操作动作</option>
          <option *ngFor="let item of actionTypes" [value]="item.name" [selected]="item.desc == '下载模板'">{{item.desc}}</option>
        </select>

但是将option的[value]="item.name"去掉就能实现啦,这里就算是将value替换成ngValue也是一样的效果。
说明存在value和ngValue的话selected就不能生效,那怎么办呐,不可能不要value值哒。

angular4里还可以通过[attr.属性名]给元素添加属性,这里如果将value换成[attr.value]="item.name"然后配合[selected]=true一起使用,你会发现我们需要的效果就出来啦。

但是测试了一下,如果将[attr.value]="item.name"和[selected]=true互换为[value]="item.name"和[attr.selected]=true就会出现异常,这就不知都为什么啦。

就像有人遇到的在指令里使用ElementRef生成一个dom,并添加点击事件。ref.onclick = 'xxx()'是无效的。但是ref.setAttribute('onclick', 'xxx()')却是可以的。也没搞明白是什么原因


备注:前面说到的selected=true无法实现,条件是在select上添加了[(ngModel)]的情况下,如果不绑定[(ngModel)]的话selected=true可以选择到满足条件的选项。
如果不添加[(ngModel)],那么(ngModelChange)事件就无法被触发,只能使用(change)事件获取值的改变。

又发现

<select name="" [(ngModel)]="chooseYear" (ngModelChange)="yearChange()">
          <option value="">请选择</option>
          <option *ngFor="let item of yearList" [value]="item" [selected]="chooseYear == item">{{item}}</option>
        </select>

这样也能实现。。。。。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
6个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Easter79 Easter79
3年前
sql注入
反引号是个比较特别的字符,下面记录下怎么利用0x00SQL注入反引号可利用在分隔符及注释作用,不过使用范围只于表名、数据库名、字段名、起别名这些场景,下面具体说下1)表名payload:select\from\users\whereuser\_id1limit0,1;!(https://o
Jacquelyn38 Jacquelyn38
4年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
ASP.NET MVC 4 之 Jquery Ajax
//前台界面,一个下拉框,一根文本框<select id"SEX"    <option男</option    <option女</option    <option未知</option</select<input id "DESC"  type"text"/
Stella981 Stella981
3年前
JQuery中对option的添加、删除、取值
jQuery获取Select选择的Text和Value:1\.$("select\_id").change(function(){//code...});  //为Select添加事件,当选择其中一项时触发2\.varcheckText$("select\_id").find("option:selected").text();  
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Stella981 Stella981
3年前
Bypass ngx_lua_waf SQL注入防御(多姿势)
0x00前言ngx\_lua\_waf是一款基于ngx\_lua的web应用防火墙,使用简单,高性能、轻量级。默认防御规则在wafconf目录中,摘录几条核心的SQL注入防御规则:select.(from|limit)(?:(union(.?)select))(?:from\Winformation_schema\W)这边
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
分享者
分享者
Lv1
青紫虽被体,不如早还乡。
文章
4
粉丝
0
获赞
0