Angular 2 sélectionner une option (menu déroulant) - comment obtenir la valeur lors du changement afin de pouvoir l'utiliser dans une fonction?

Question

Je suis en train de construire une liste déroulante avec quelques valeurs.

Cependant, en sélectionnant une valeur, je veux faire un appel API qui prend un identifiant.

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

values = [
  { id: 3432, name: "Récent" },
  { id: 3442, name: "Le plus populaire" },
  { id: 3352, name: "Classement" }
];

Dans mon template, j'utilise ce tableau de la manière suivante :

    {{v.name}}

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

Merci

Answer 1

Ma réponse est un peu tardive mais simple; elle pourrait cependant aider quelqu'un à l'avenir; J'ai expérimenté avec les versions d'angular telles que 4.4.3, 5.1+, 6.x, 7.x, 8.x, 9.x et 10.x en utilisant $event (la dernière pour le moment)

Modèle:

    {{v.name}}

TS

export class MyComponent {
  public onChange(event): void {  // l'événement vous donnera un aperçu complet de l'action
    const newVal = event.target.value;
    console.log(newVal);
  }
}

Answer 2

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

@Component({
  selector: 'my-app',
  template: `
    Démonstration de sélection

       {{c.name}} 

  `
})
class App {
  cities = [{'name': 'SF'}, {'name': 'NYC'}, {'name': 'Buffalo'}];
  selectedCity = this.cities[1];

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

L'événement (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 d'avoir importé le module FormsModule dans l'application.

Voici un Plunker

Answer 3

values_of_objArray = [
  { id: 3432, name: "Récent" },
  { id: 3442, name: "Le plus populaire" },
  { id: 3352, name: "Classement" }
];

private ValueId : number = 0 // cela sera utilisé pour un accès multiple comme 
                             // mise à jour, suppression de l'objet avec 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 contient l'objet sélectionné depuis la vue.

HTML:

  {{Value.name}}

Answer 4

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 : [value] et [ngValue] fonctionnent tous les deux ici.

    {{v.name}}

En ts:

your_method(v:any){
  //accéder aux valeurs ici si nécessaire. 
  // v.id ou v.name
}

Remarque : Si vous utilisez un formulaire réactif et que vous souhaitez récupérer la valeur sélectionnée lors de la soumission du formulaire, vous devriez utiliser la directive [ngValue] au lieu de [value] dans le scénario ci-dessus

Exemple:

        {{v.name}}

En ts:

méthode_de_soumission_formulaire(){
        let v : any = this.form_group_name.value.form_control_name;  
    }

Answer 5

Fichier Template/HTML (component.ts)

    {{v.name}}

Fichier Typescript (component.ts)

values = [
  { id: 3432, name: "Récent" },
  { id: 3442, name: "Le plus populaire" },
  { id: 3352, name: "Note" }
];

onChange(cityEvent){
    console.log(cityEvent); // Il affichera les données de la ville sélectionnée
}

(ngModelChange) est l'@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