更改选择选项时获取当前值-Angular 2

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (38)

我正在编写angular 2组件,并面临这个问题。

描述:控件时,我希望将选择选择器中的选项值推送到它的处理程序中。(change)事件被触发。

如以下模板:

<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)?

提问于
用户回答回答于

有一种方法可以从不同的选项中获得值。

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;
  }
用户回答回答于

template.html

<select (change)="filterChanged($event.target.value)">
<option *ngFor="let type of filterTypes" [value]="type.value">{{type.display}}
</option>
</select>

component.ts

export class FilterComponent implements OnInit {

selectedFilter:string;
   public filterTypes = [
   {value:'percentage', display:'percentage'},
  {value:'amount', display:'amount'},
  ];

   constructor() { 
   this.selectedFilter='percentage';
   }

   filterChanged(selectedValue:string){
   console.log('value is ',selectedValue);

   }

  ngOnInit() {
  }

  }

扫码关注云+社区