変更選択オプションと、現在の値を取得します - Angular2

Question

私はangular2コンポーネントを書いていると、この問題に直面しています。

(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のを使用せずに）値を得ることができますか？

Answer 1

異なるオプションから値を取得する方法があります。このplunker

component.htmlをチェック

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

component.tsこの角度4でPlunker

<select (change)="onItemChange($event.target.value)"> 
    <option *ngFor="#value of values" [value]="value.key">{{value.value}}</option> 
</select> 

Answer 2

チェックアウト、これは私

のために働いていました3210

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() { 
    } 

    } 

Answer 3

作業

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

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

Answer 4

、@microniksによって示唆されているように動作しませんでした（$ event.target.value）を渡します。代わりに（$ event.value）が働いていました。私はAngular 4.2.xとAngular Material 2を使用しています。

<select (change)="onItemChange($event.value)"> 
    <option *ngFor="#value of values" [value]="value.key"> 
     {{value.value}} 
    </option> 
</select>