Obtenir la valeur actuelle en cas de modification, sélectionnez l'option - Angular2

Je suis en train d'écrire un angular2 composant et je suis confronté à ce problème.

Description: je veux pousser un valeur de l'option à sélectionner le sélecteur à son maître, lorsque le (change) événement est déclenché.

Comme 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 l'aide de jquery) ?

InformationsquelleAutor Garry | 2016-01-28
  1. 52

    Il y a un moyen d'obtenir la valeur d'options différentes. cochez cette plunker

    component.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;
  }
    • doesnot travail,de l'inconnu #
    • qu'est-ce que l'utilisation de ce code ici présent.commande = { type: 'type 1' };
    InformationsquelleAutor Mubashir
  2. 24

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

  }
    • mais comment obtenir de type".affichage" dans filterChanged()
    InformationsquelleAutor javed
  3. 3

    Caisse de travail Plunker

    <select (change)="onItemChange($event.target.value)">
    <option *ngFor="#value of values" [value]="value.key">{{value.value}}</option>
</select>
    • Merci pour la réponse, effectivement @Mubashir réponse est ce que je veux, sans lire les DOM.
    • Pas de problème. Cheers !
    InformationsquelleAutor micronyks
  4. 2

    Pour moi, en passant ($event.cible.valeur) comme suggéré par @microniks n'a pas de travail. Ce qui a fonctionné a été ($event.valeur) à la place. Je suis à l'aide Angulaire 4.2.x et de la quantité de Matériel 2

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

    Vous pouvez Utiliser ngValue. ngValue passe sting et objet à la fois.

    Passer comme Objet:

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

    Passer comme une Chaîne de caractères:

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