html – 更改选择选项时获取当前值 – Angular2

发布时间：2020-12-14 21:20:34 所属栏目：资源来源：网络整理

导读：我正在写一个angular2组件，我正面临着这个问题。描述：我想在触发(更改)事件时将select选择器中的选项值推送到其处理程序。如下面的模板： select (change)="onItemChange(!--something to push--)" option *ngFor="#value of values" value="{{value.key

我正在写一个angular2组件，我正面临着这个问题。

描述：我想在触发(更改)事件时将select选择器中的选项值推送到其处理程序。

如下面的模板：

<select (change)="onItemChange(<!--something to push-->)">
    <option *ngFor="#value of values" value="{{value.key}}">{{value.value}}</option>
</select>

组件类：

export Class Demo{

  private values = [
     {
        key:"key1",value:"value1"
     },{
        key:"key2",value:"value2"
     }
  ]

  constructor(){}
  onItemChange(anyThing:any){
     console.log(anyThing); //Here I want the changed value
  }
}

如何获取值(不使用jquery)？

解决方法

有一种方法可以从不同的选项中获取价值。检查这个 plunker

component.html

<select class="form-control" #t (change)="callType(t.value)">
  <option *ngFor="#type of types" [value]="type">{{type}}</option>
</select>

component.ts

this.types = [ 'type1','type2','type3' ];
   this.order = {
      type: 'type1'          
  };  

  callType(value){
    console.log(value);
    this.order.type=value;
  }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!