Angulaire 4 - à l'aide d'objets de valeurs d'option dans une liste de sélection

Je sais que des questions similaires ont été posées, mais je n'ai trouvé aucun avec une bonne réponse. Je veux créer une liste de sélection dans une forme Angulaire, où la valeur de chaque option est un objet. Aussi, je ne veux PAS utiliser 2 voies de la liaison de données. par exemple, si mon Composant comporte les champs suivants:

 
lUsers: [] = [ 
{ Nom: "Billy Williams, Genre "masculin"}, 
{ Nom: 'Sally Ride", du Genre: 'les femmes'} 
]; 
curUser: tout;

Je voudrais que mon gabarit HTML pour contenir ceci:

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

Avec ce code, si, ma setNewUser() la fonction reçoit le contenu de la sélection de l'utilisateur du Nom de domaine. Pourquoi il choisit ce domaine particulier, je n'ai aucune idée. Ce que j'attends, c'est qu'il devait recevoir la "valeur" de l'option sélectionnée, j'ai spécifiquement défini pour un objet utilisateur.

Notez que j'ai utilisé ngValue au lieu de la valeur de l'option. Qui a été par la suggestion des autres sur soi. Si j'ai de la valeur d'usage au lieu de cela, ce qui se passe est que l'objet est converti à la chaîne " [Object Object]", qui est ce que setNewUser() reçoit, ce qui est inutile.

Pour info, je travaille sur Windows 10, à l'aide angulaire 4.0.0 avec @angulaire/cli 1.1.2. Voici la setNewUser() méthode:

 
setNewUser(utilisateur: l'Utilisateur): void { 

console.log(utilisateur); 
c'.curUser = utilisateur; 
} //setNewUser()

Je suis déterminer ce que c'est que d'être transmis à la fois mon enregistrement, et incluant également présent sur le modèle: <pre>{{curUser}}</pre>

OriginalL'auteur user1738579 | 2017-07-17

  1. 29

    Je suis actuellement à l'aide [ngValue] et il stocke les objets de l'amende juste.

    L'explication de pourquoi vous avez connu des problèmes à l'aide de (change) au lieu de (ngModelChange) peut être trouvé dans cette question

    Donc, puisque vous avez déjà utilisé [ngValue], vous voulez probablement faire quelque chose de ce genre, où vous devrez utiliser uniquement un moyen de liaison afin d'être en mesure d'utiliser le ngModelChange directive:

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

    Et votre ts fichier de capture de l'événement et de recevoir de l'Utilisateur de l'objet sans avoir à suivre par id, fondamentalement, la réutilisation de votre ancienne méthode sera assez bon:

    setNewUser(user: User): void {
    console.log(user);
    this.curUser = user;
    }
    J'ai dû le changer [ngModel]="lUsers" pour que cela fonctionne
    merci pour votre aide, ami de son beau travail.

    OriginalL'auteur Steven

  2. 17

    Comme value attribut de option balise ne peut pas stocker un objet entier, nous allons créer une nouvelle propriété id dans le lUsers tableau de garder une trace de 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 va passer l'unique id à notre setNewUser la fonction de 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);
}

    Ici est la plnkr démo du code ci-dessus. Ouvrez votre développeur d'outils pour afficher les journaux de la console.

    Ni l'OP du code ni la vôtre traiter la valeur de l'attribut. Je ne suis pas sûr pourquoi il est indiqué dans votre réponse. En outre, l'OP essaie d'utiliser ngValue, de sorte qu'il serait utile d'ajouter une explication de pourquoi ils devraient se lier à la valeur de la propriété à la place (Est-ce mieux? L'OP de l'utiliser de façon incorrecte? ...)

    OriginalL'auteur Dhyey

  3. 3

    Vous pouvez utiliser [ngValue] au lieu de [valeur] sur l'-Éléments.
    Il fonctionne pour moi.

    J'ai constaté que les renseignements ici: https://www.reddit.com/r/Angular2/comments/65run4/select_option_using_value_vs_ngvalue/

    L'OP utilise déjà [ngValue]

    OriginalL'auteur Dieter Rehbein