html angularjs angular

html - placeholder select angular 4



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

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

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


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


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>


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>


Plunker un Plunker este trabajo Plunker

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