Lier l'élément de sélection à l'objet dans Angular 2

Angular 2 est un framework populaire utilisé pour créer des applications Web. L’une des tâches les plus courantes dans Angular 2 consiste à lier un élément select à un objet.

Cet article apprendra à utiliser les directives ng-for et ng-value pour lier un élément select à un objet dans Angular 2.

Utilisez le ng-for et le ng-value pour lier un élément Select à un objet dans Angular 2

Ng-For est une directive de modèle intégrée qui permet de boucler simplement sur une collection d’éléments, tels qu’un tableau ou un objet, et de créer un modèle pour chacun.

*ngFor="let <value> of <collection>"

La directive ng-value lie l’élément select à un objet. Il spécifie le nom de la propriété sur l’objet qui doit correspondre à la valeur de l’élément select.

 <input ng-value="expression"></input>

Parfois, les débutants confondent la directive ng-value et value. Donc, si vous travaillez sur la liaison d’un élément select avec un objet dans Angular 2, vous devez connaître la différence entre ng-value et value.

la différence entre la valeur ng et la valeur dans Angular

La différence est que value est toujours une chaîne, alors que ngValue vous permet de passer un objet. Par exemple, vous avez un cas d’utilisation où vous devez afficher les noms des éléments dans la liste déroulante.

Et lorsque vous choisissez un seul objet dans le menu, vous devez sélectionner l’identifiant de l’objet pour rechercher dans la base de données. Il serait utile d’utiliser ngValue dans un tel scénario car il a besoin d’un objet.

De plus, le modèle d’objet que vous souhaitez remplir doit être défini dans votre objet.

Cliquez ici si vous souhaitez obtenir plus d’informations sur ng-value.

Étapes pour lier un élément Select à un objet dans Angular 2

Quelques étapes de base à suivre sont données ci-dessous.

1. Ajoutez l’attribut ng-model à l’élément select.
2. Ajoutez l’attribut selected à l’objet auquel vous souhaitez vous lier.
3. Liez la propriété de l’objet à l’élément select avec une syntaxe d’accolade, {{obj.property}}.

Prenons un exemple qui nous aidera à comprendre toutes les étapes en détail.

Tout d’abord, nous allons créer un composant nommé AppComponent. Ensuite, nous allons créer un objet d’interface du nom de example qui affiche id et name.

Dans ce cas, id et name stockent des chaînes. Après les deux étapes ci-dessus, il est temps de modifier les options en ajoutant quelques informations.

Le code complet /app.component.ts est donné ci-dessous.

import { Component } from '@angular/core';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Demo';

  selectedObject : example;
  SimpleExample = [
    {id: 'Welcome to New York City', name: 'New York'},
    {id: 'Welcome to Japan', name: 'Japan'},
    {id: 'Welcome to Singapore', name: 'Singapore'},
    {id: 'Welcome to Delft', name: 'Delft'}
  ]
}

interface example{
  id:string;
  name:string;
}

Dans le fichier component.ts, nous avons ajouté une variable selectedObject, un objet example, et nous allons le lier à l’élément select en utilisant ngModel.

Une autre variable, SimpleExample, comprend une collection d’objets utilisés pour afficher les options de sélection ngValue.

Le code complet /app.component.html est donné ci-dessous.

<h2>Angular 2 Select Example</h2>

<select [(ngModel)]="selectedObject">
<option *ngFor="let show of SimpleExample" [ngValue]="show">
{{show.name}}
</option>
</select>

{{selectedObject | json}}

L’objet example a maintenant été ajouté au selectedObject. Et nous avons utilisé le tube JSON pour l’afficher.

Le tube JSON peut transformer un objet d’entrée en le résultat souhaité, qui peut ensuite être affecté à une variable ou passé en argument. Il utilise la fonction JavaScript intégrée JSON.stringify() pour transformer les données en une chaîne JSON.

Pour en savoir plus sur Angular JSON Pipe, cliquez ici.

Nous obtenons la sortie suivante de l’exemple mentionné ci-dessus.

Cliquez ici pour vérifier le code de travail complet mentionné ci-dessus.