更改选择选项时获取当前值 \- 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）？

原文由 Garry 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

组件.html

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

组件.ts

 this.types = [ 'type1', 'type2', 'type3' ];

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

原文由 Mubashir 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

HTML

 <h3>Choose Your Favorite Cricket Player</h3>
<select #cricket (change)="update($event)">
    <option value="default">----</option>
    <option *ngFor="let player of players" [value]="player">
        {{player}}
    </option>
</select>

<p>You selected {{selected}}</p>

Javascript

 import { Component } from '@angular/core';

@Component({
  selector: 'app-dropdown',
  templateUrl: './dropdown.component.html',
  styleUrls: ['./dropdown.component.css']
})
export class DropdownComponent {
  players = [
    "Sachin Tendulkar",
    "Ricky Ponting",
    "Virat Kohli",
    "Kumar Sangakkara",
    "Jacques Kallis",
    "Hashim Amla    ",
    "Mahela Jayawardene    ",
    "Brian Lara",
    "Rahul Dravid",
    "AB de Villiers"
  ]
  selected = "----"

  update(e){
    this.selected = e.target.value
  }
}

app.componen.html

 <app-dropdown></app-dropdown>

原文由 Surya R Praveen 发布，翻译遵循 CC BY-SA 4.0 许可协议