web-dev-qa-db-fra.com

Angular 4 - utilisation d'objets pour les valeurs d'option dans une liste de sélection

Je sais que des questions similaires ont été posées, mais je n'ai trouvé aucune réponse satisfaisante. Je souhaite créer une liste de sélection dans un formulaire Angular, où la valeur de chaque option est un objet. En outre, je ne veux PAS utiliser la liaison de données bidirectionnelle. par exemple. si mon composant a ces champs:

 
 Utilisateurs: any [] = 
 {Nom: 'Billy Williams', Sexe: 'homme'}, 
 {Nom: 'Sally Ride', Sexe: 'femme'} 
; 
 Client: aucune;

J'aimerais que mon modèle HTML contienne ceci:

 
 <select #selectElem (change) = "setNewUser (selectElem.value)" "> 
 <option * ngFor =" permet à l'utilisateur de lUsers "[ngValue] =" utilisateur " > 
 {{nom.utilisateur}} 
 </ option> 
 </ select>

Avec ce code cependant, ma fonction setNewUser () reçoit le contenu du champ Nom de l'utilisateur sélectionné. Pourquoi il choisit ce domaine spécifique, je n'en ai aucune idée. Ce que j'attends, c'est qu'il reçoive la "valeur" de l'option sélectionnée, que je mets spécifiquement sur un objet utilisateur.

Notez que j'ai utilisé ngValue au lieu de valeur dans l'option. C'était par suggestion d'autres sur SO. Si j'utilise plutôt la valeur, l'objet est converti en la chaîne '[Objet objet]', qui est ce que setNewUser () reçoit, ce qui est inutile.

Pour info, je travaille sur Windows 10, en utilisant angular 4.0.0 avec @ angular/cli 1.1.2. Voici la méthode setNewUser ():

 
 setNewUser (utilisateur: utilisateur): void {
 
 console.log (utilisateur); 
 this.curUser = utilisateur; 
} // setNewUser ()

Je suis en train de déterminer exactement ce qui lui est transmis à la fois lors de la journalisation et de l'inclusion de cette information dans le modèle: <pre>{{curUser}}</pre>

angularangular-forms
24
user1738579

J'utilise actuellement [ngValue] et il stocke parfaitement les objets.

L’explication de la raison pour laquelle vous avez rencontré des problèmes lors de l’utilisation de (change) au lieu de (ngModelChange) se trouve dans cette question

Donc, puisque vous avez déjà utilisé [ngValue], vous voudrez probablement faire quelque chose comme ceci, où vous n'utiliserez qu'une liaison à sens unique afin de pouvoir utiliser la directive ngModelChange:

<select (ngModelChange)="setNewUser($event)" (ngModel)="lUsers">
        <option *ngFor="let user of lUsers" [ngValue]="user">
            {{user.Name}}
        </option>
    </select>

Et votre fichier ts capturera l'événement et recevra l'objet User sans avoir besoin de le suivre par identifiant, en gros, réutiliser votre ancienne méthode suffira:

setNewUser(user: User): void {
    console.log(user);
    this.curUser = user;
    }
34
Steven

Comme l'attribut value de option ne peut pas stocker un objet entier, nous allons créer une nouvelle propriété id dans le tableau lUsers pour suivre l'élément sélectionné.

HTML:

<select #selectElem (change)="setNewUser(selectElem.value)">
    <option *ngFor="let user of lUsers" [value]="user.id">
        {{user.Name}}
    </option>
</select>

Cela transmettra l'unique id à notre setNewUser fonction lors du changement.

Dans votre composant.ts:

...

lUsers: any[] = [
    { id: 1, Name: 'Billy Williams', Gender: 'male' },
    { id: 2, Name: 'Sally Ride', Gender: 'female'}
];
curUser: any = this.lUsers[0]; // first will be selected by default by browser

...

setNewUser(id: any): void {
    console.log(id);
    // Match the selected ID with the ID's in array
    this.curUser = this.lUsers.filter(value => value.id === parseInt(id));
    console.log(this.curUser);
}

Voici la démonstration plnkr du code ci-dessus. Ouvrez vos outils de développement pour afficher les journaux de la console.

19
Dhyey

Vous pouvez utiliser [ngValue] au lieu de [valeur] sur l'élément -Elements. Ça marche pour moi.

J'ai trouvé cette information ici: https://www.reddit.com/r/Angular2/comments/65run4/select_option_using_value_vs_ngvalue/

4
Dieter Rehbein

ANGULAIRE 6 SIMPLEMENT FAIRE CECI

HTML

<div class="col-3" style="float:left;padding-left: 18px !important;">
      <label>Vehicle No.</label>
      <div *ngIf="gpsDevicesArray && gpsDevicesArray.length > 0">
            <select [ngModel]="selectedVehicle" style="padding: 7px;border-radius: 4px;"
                    (ngModelChange)="onVehicleNumberChange($event)">
                    <option *ngFor=" let device of gpsDevicesArray" [ngValue]="device">
                        {{device.vehicleNumber}}
                    </option>
            </select>
      </div>
</div>

TypeScript

// Pour la valeur initiale (placez cette ligne dans la fonction d'appel du serveur)

 this.selectedVehicle = gpsDevicesArray[0];

// auditeur

 onVehicleNumberChange(device) {
        console.log("selectedVehicle ====", device);
 }
2
kumar kundan