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

2019年8月24日 177次阅读 来源: Amor丶Diamond

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>

这样也能实现。。。。。

    原文作者：Amor丶Diamond
    原文地址: https://segmentfault.com/a/1190000015707128
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞