web-dev-qa-db-fra.com

Option de sélection angulaire 2 (liste déroulante) - comment obtenir la valeur lors d’un changement afin qu’elle puisse être utilisée dans une fonction?

J'essaie de construire un menu déroulant avec quelques valeurs.

Cependant, lors de la sélection d'une valeur, je souhaite effectuer un appel d'API prenant un identifiant.

Dans mon composant.ts, j'ai un tableau de valeurs:

values = [
  { id: 3432, name: "Recent" },
  { id: 3442, name: "Most Popular" },
  { id: 3352, name: "Rating" }
];

Dans mon modèle, j'utilise ce tableau comme suit:

<select>
  <option *ngFor="let v of values" [value]="v">  
    {{v.name}}
  </option>
</select>

Cependant, en choisissant une valeur dans la liste déroulante, comment puis-je accéder à la propriété id? Je veux utiliser cela dans ma fonction getPhotosByType(id).

Merci

javascripthtmlangulartypescript
29
user1354934

Ma réponse est un peu tardive mais simple; mais peut aider quelqu'un à l'avenir; J'ai expérimenté avec angular 4.4.3, 5.1+, 6.x et 7.x avec $ event (plus tard pour le moment)

Modèle:

<select (change)="onChange($event)">
    <option *ngFor="let v of values" [value]="v.id">{{v.name}}</option>
<select>

TS

export class MyComponent {
  public onChange(event): void {  // event will give you full breif of action
    const newVal = event.target.value;
    console.log(newVal);
  }
}
36
mumair

Vous devez utiliser une directive de formulaire angulaire sur la variable select. Vous pouvez le faire avec ngModel. Par exemple

@Component({
  selector: 'my-app',
  template: `
    <h2>Select demo</h2>
    <select [(ngModel)]="selectedCity" (ngModelChange)="onChange($event)" >
      <option *ngFor="let c of cities" [ngValue]="c"> {{c.name}} </option>
    </select>
  `
})
class App {
  cities = [{'name': 'SF'}, {'name': 'NYC'}, {'name': 'Buffalo'}];
  selectedCity = this.cities[1];

  onChange(city) {
    alert(city.name);
  }
}

L'écouteur d'événements (ngModelChange) émet des événements lorsque la valeur sélectionnée change. C'est ici que vous pouvez connecter votre rappel.

Notez que vous devez vous assurer que vous avez importé la FormsModule dans l'application.

Voici un Plunker

21
Paul Samsotha
values_of_objArray = [
  { id: 3432, name: "Recent" },
  { id: 3442, name: "Most Popular" },
  { id: 3352, name: "Rating" }
];

private ValueId : number = 0 // this will be used for multi access like 
                             // update, deleting the obj with id.
private selectedObj : any;

private selectedValueObj(id: any) {
  this.ValueId = (id.srcElement || id.target).value;
  for (let i = 0; i < this.values_of_objArray.length; i++) {
    if (this.values_of_objArray[i].id == this.ValueId) {
      this.selectedObj = this.values_of_objArray[i];
    }
  }
}

Jouez maintenant avec this.selectedObj qui a l’obj sélectionné dans la vue.

HTML:

<select name="values_of_obj" class="form-control" [(ngModel)]="ValueId"  
        (change)="selectedValueObj($event)" required>

  <option *ngFor="let Value of values_of_objArray"
          [value]="Value.id">{{Value.name}}</option>    
</select>
3
Rinold

Une autre solution serait, vous pouvez obtenir l'objet lui-même en tant que valeur si vous ne mentionnez pas son id en tant que valeur : Remarque: [valeur] et [ngValue] les deux fonctionnent ici.

<select (change)="your_method(values[$event.target.selectedIndex])">
  <option *ngFor="let v of values" [value]="v" >  
    {{v.name}}
  </option>
</select>

En ts:

your_method(v:any){
  //access values here as needed. 
  // v.id or v.name
}

Remarque: Si vous utilisez un formulaire réactif et que vous souhaitez capturer la valeur sélectionnée dans le formulaire Envoyer, vous devez utiliser [ngValue] directive au lieu de [valeur] dans scanerio 

Exemple:

  <select (change)="your_method(values[$event.target.selectedIndex])" formControlName="form_control_name">
      <option *ngFor="let v of values" [ngValue]="v" >  
        {{v.name}}
      </option>
    </select>

En ts:

form_submit_method(){
        let v : any = this.form_group_name.value.form_control_name;  
    }
2
Nabin Kumar Khatiwada

Modèle/fichier HTML (composant.ts) 

<select>
 <option *ngFor="let v of values" [value]="v" (ngModelChange)="onChange($event)">  
    {{v.name}}
  </option>
</select>

Fichier TypeScript (composant.ts)

values = [
  { id: 3432, name: "Recent" },
  { id: 3442, name: "Most Popular" },
  { id: 3352, name: "Rating" }
];

onChange(cityEvent){
    console.log(cityEvent); // It will display the select city data
}

(ngModelChange) est le @Output de la directive ngModel. Il se déclenche lorsque le modèle change. Vous ne pouvez pas utiliser cet événement sans la directive ngModel

1
VIKAS KOHLI