Comment obtenir la valeur de l’élément déroulant sélectionné

Avez-vous déjà eu à demander: « Comment puis-je obtenir la valeur de l’élément de menu déroulant sélectionné dans Angular? » Répondons-y !

Dans les applications angulaires, la liste déroulante est un élément HTML typique utilisé dans les formulaires et les composants pour permettre aux utilisateurs de sélectionner des valeurs. Aujourd’hui, nous allons apprendre trois façons d’obtenir la valeur de l’élément sélectionné par l’utilisateur dans une liste déroulante avec Angular.

Nos trois approches sont :

• Utilisation d’un événement de modification
• Utilisation de ngModel
• Utilisation de viewChild

Notre exemple d’application comporte trois composants avec le même balisage HTML, une liste déroulante avec une liste d’équipes NBA et une propriété, selectedTeam, sur le fichier TypeScript. Nous mettrons en œuvre chaque solution pour attribuer la valeur sélectionnée dans la liste déroulante au selectedTeam variable.

• TeamWithChangeEventComponent : utilise l’événement de modification HTML et la référence de modèle.
• TeamUsingViewChildComponent : utilise le décorateur viewChild et la référence de modèle.
• TeamWithNgmodelComponent : utilise la directive ng-model.

Le balisage HTML ressemble à ceci :

<div class="col">
<p>You select your team {{ selectedTeam }} using viewChild</p>
	<select #teams (change)="onSelected()">
		<option default>Pick a team</option>
		<option>Lakers</option>
		<option>Miami</option>
		<option>Cleveland</option>
	</select>
</div>

Et le fichier TypeScript aura la variable selectedTeam.

{
	selectedTeam = '';
}

Travaillons avec la première solution TeamWithChangeEventComponent.

Utilisation des variables d’événement de modification et de référence de modèle

Pour travailler avec cette approche, nous utilisons d’abord des variables de référence HTML pour lire la valeur et le changement d’événement de liste déroulante, écouter lorsque l’utilisateur modifie la sélection dans la liste déroulante et créer une nouvelle méthode onSelected attribuer la valeur à selectedTeam.

Tout d’abord, créez les variables de modèle pour la liste déroulante à l’aide de #teams. Utilisez la liaison d’événement pour écouter le change événement et lien avec le onSelect méthode.

Le onSelect La méthode reçoit la variable de référence et prend la valeur de l’élément déroulant.

Le code ressemblera à ceci :

<div class="col">
<p>You select your team {{ selectedTeam }} using change event</p>
	<select #teams (change)="onSelected(teams.value)">
		<option default>Pick a team</option>
		<option>Lakers</option>
		<option>Miami</option>
		<option>Cleveland</option>
	</select>
</div>

Ensuite, créez le onSelected(value) méthode dans le fichier TypeScript. Prenez la valeur en paramètre et affectez-la au selectedTeam variable.

import { Component } from '@angular/core';
@Component({
	selector: 'app-team-with-change-event',
	templateUrl: './team-with-change-event.component.html',
	styleUrls: ['./team-with-change-event.component.css'],
})
export class TeamWithChangeEventComponent {
	selectedTeam = '';
	onSelected(value:string): void {
		this.selectedTeam = value;
	}
}

Comment ça marche?

Angular utilise la liaison d’événement pour lier la méthode, et il obtient la valeur du paramètre car il utilise une référence de modèle pour accéder à l’élément HTML déroulant.

Vous pouvez en savoir plus sur variables de référence de modèle et liaison d’événement dans Angular.

Ensuite, utilisez le viewChild—allons-y !

Utilisation de viewChild et de la variable de référence de modèle

La nouvelle approche utilise le @ViewChild décorateur et variables de référence de modèle. Dans le nouveau scénario, nous créons la variable de référence de modèle pour la liste déroulante des équipes à l’aide de #teams et écoutez le (change) un événement. Cependant, la méthode onSelected ne nécessite pas de transmettre la valeur avec une légère modification.

Le HTML ressemble à ceci :

<div class="col">
<p>You select your team {{ selectedTeam }} using viewChild</p>
	<select #teams (change)="onSelected()">
		<option default>Pick a team</option>
		<option>Lakers</option>	
		<option>Miami</option>
		<option>Cleveland</option>
	</select>
</div>

Dans notre fichier TypeScript, ajoutez la variable teamsà l’aide du décorateur @ViewChild avec type ElementRef et créer la méthode onSelected() sans paramètres. Mais en utilisant la référence des équipes, on peut lire la valeur de la référence des équipes et l’affecter à la variable.

Le code ressemblera à ceci :

import { Component, ElementRef, ViewChild } from '@angular/core';
@Component({
	selector: 'app-team-using-view-child',
	templateUrl: './team-using-view-child.component.html',
	styleUrls: ['./team-using-view-child.component.css'],
})
export class TeamUsingViewChildComponent {
	@ViewChild('teams') teams!: ElementRef;
	selectedTeam = '';
	onSelected():void {
		this.selectedTeam = this.teams.nativeElement.value;
	}
}

Mais comment ça marche?

ElementRef est un wrapper pour l’élément HTML DOM, et la propriété nativeElement a une référence à l’objet DOM. En utilisant le @ViewChild décorateur, nous obtenons ElementRef dans la classe du composant.

N’hésitez pas à en savoir plus sur le VoirEnfant décorateur et Réfélément.

Utilisation de la directive NgModel

Angular a un autre moyen d’obtenir la valeur sélectionnée dans la liste déroulante en utilisant la puissance de ngModel et la liaison de données bidirectionnelle.

Le ngModel fait partie du module de formulaires. Nous devons l’importer dans le NgModule liste dans le app.modulequi sera disponible dans notre application.

La directive ngModel nous aide à écouter et à mettre à jour les variables lorsque l’événement change de déclencheur, et pour l’utiliser, ajoutez le ngModel en utilisant [(ngModel)]="selectedTeam".

Angular obtient automatiquement la valeur et met à jour la variable selectedTeam en utilisant l’approche ngModel lorsque l’utilisateur modifie la valeur. Nous n’avons pas besoin de créer le onSelected méthode dans notre fichier TypeScript.

<div class="col">
<p>You select your team {{ selectedTeam }}</p>
<p>The change Event</p>
	<select [(ngModel)]="selectedTeam">
		<option default>Pick a team</option>
		<option>Lakers</option>
		<option>Miami</option>
		<option>Cleveland</option>
	</select>
</div>

Comment ça marche?

Premièrement le ngModel directive utilise la ControlValueAccessor, car Angular donne accès à tous les éléments de formulaire HTML tels que input, select et checkbox par défaut. Il envoie la valeur et la liaison de données bidirectionnelle crée le lien entre la valeur et la variable.

Si vous voulez en savoir plus :

Conclusion

Nous avons conçu trois façons différentes de travailler avec les listes déroulantes dans nos applications. Vous pouvez trouver un exemple de code complet pour cet article et jouer avec l’exemple d’application dans les liens suivants :

Si vous souhaitez gagner du temps et créer des listes déroulantes rapides et avancées, je vous recommande de consulter l’article sur Listes déroulantes angulaires en quelques minutes avec l’interface utilisateur de Kendo-il vous montre comment utiliser Liste déroulante angulaire dans vos applications.

Merci pour votre temps. J’espère que vous pourrez voir combien de façons il existe de travailler avec des listes déroulantes et de choisir la meilleure pour votre application.