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

前端之家收集整理的这篇文章主要介绍了html – 更改选择选项时获取当前值 – Angular2前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在写一个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;
  }

猜你在找的HTML相关文章