web-dev-qa-db-fra.com

Obtenir la valeur actuelle lors du changement, sélectionnez l'option - Angular2

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

htmlangular
27
Garry

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

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

  }
21
javed

Commander ce travail Plunker

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

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>
2
Bright Dodo

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>
1
Ashfaq Hussain