关于在angular4.X里运用select默许挑选和选中满足前提的option

2019年8月22日 169次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞