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>