J'écris un composant angular2 et je suis confronté à ce problème.
Description: Je souhaite transmettre une valeur d'option du sélecteur de sélection à son gestionnaire lorsque l'événement (change)
est déclenché.
Tels que le modèle ci-dessous:
<select (change)="onItemChange(<!--something to Push-->)">
<option *ngFor="#value of values" value="{{value.key}}">{{value.value}}</option>
</select>
Classe de composant:
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
}
}
Comment puis-je obtenir la valeur (sans utiliser jquery)?
Il existe un moyen d'obtenir la valeur de différentes options. vérifier ceci plunker
composant.html
<select class="form-control" #t (change)="callType(t.value)">
<option *ngFor="#type of types" [value]="type">{{type}}</option>
</select>
composant.ts
this.types = [ 'type1', 'type2', 'type3' ];
this.order = {
type: 'type1'
};
callType(value){
console.log(value);
this.order.type=value;
}
Dans angular 4, cela a fonctionné pour moi
template.html
<select (change)="filterChanged($event.target.value)">
<option *ngFor="let type of filterTypes" [value]="type.value">{{type.display}}
</option>
</select>
composant.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() {
}
}
Commander ce travail Plunker
<select (change)="onItemChange($event.target.value)">
<option *ngFor="#value of values" [value]="value.key">{{value.value}}</option>
</select>
Pour moi, passer ($ event.target.value) comme suggéré par @microniks ne fonctionnait pas. Ce qui a fonctionné était plutôt ($ event.value). J'utilise Angular 4.2.x et Angular Material 2
<select (change)="onItemChange($event.value)">
<option *ngFor="#value of values" [value]="value.key">
{{value.value}}
</option>
</select>
Vous pouvez utiliser ngValue
. ngValue
passe sting et object les deux.
Passer comme objet:
<select (change)="onItemChange($event.value)">
<option *ngFor="#obj of arr" [ngValue]="obj.value">
{{obj.value}}
</option>
</select>
Passer comme chaîne:
<select (change)="onItemChange($event.value)">
<option *ngFor="#obj of arr" [ngValue]="obj">
{{obj.value}}
</option>
</select>