html - placeholder select angular 4

Obtenga el valor actual cuando cambie la opción de selección-Angular2

Question

Estoy escribiendo un componente angular2 y estoy enfrentando este problema.

Descripción: quiero enviar un valor de opción en el selector de selección a su controlador cuando se activa el evento (change) .

Como la siguiente plantilla:

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

Clase de componente:

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
  }
}

¿Cómo puedo obtener el valor (sin usar jquery)?

Answer 1

En angular 4, esto me funcionó.

template.html

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

componente.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 2

Hay una manera de obtener el valor de diferentes opciones. revisa este plunker

component.html

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

componente.ts

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

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

Answer 3

Para mí, el paso ($ event.target.value) según lo sugerido por @microniks no funcionó. Lo que funcionó fue ($ event.value) en su lugar. Estoy usando Angular 4.2.x y Angular Material 2

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

Answer 4

Puede utilizar ngValue . ngValue pasa sting y object.

Pasar como objeto:

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

Pasar como cadena:

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

Answer 5

Plunker un Plunker este trabajo Plunker

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