web-dev-qa-db-fra.com

Angular 2 - Définition de la valeur sélectionnée dans la liste déroulante

Je suis tombé sur un problème de présélection des valeurs dans une liste déroulante dans Angular 2.

Je définis un tableau de couleurs dans le composant que je lie avec succès à la liste déroulante. Le problème que je rencontre concerne la présélection d'une valeur sur la page init.

La ligne [selected]="car.color.id == x.id" devrait sélectionner la valeur qui a été définie sur le modèle de voiture this.car.color = new Colour(-1,'');, mais cela ne fonctionne que si je règle l'identifiant de couleur de voiture sur le dernier élément de la liste (en l'occurrence noir) this.car.color = new Colour(4,'');

J'utilise la dernière version de Angular (rc3) et j'ai rencontré les mêmes problèmes avec rc1 et rc2.

Voici un plunker montrant le problème.

https://plnkr.co/edit/yIVEeLK7PUY4VQFrR48g?p=preview

Un autre aspect étrange est que lorsque vous regardez les métadonnées, Angular a défini la valeur sélectionnée sur true.

enter image description here

Mais la liste déroulante semble toujours vide.

enter image description here

Cela semble être une question distincte de ces questions connexes.

Valeur angulaire 2 définie du début de la sélection

élément de liaison à un objet dans Angular 2

Comment utiliser select/option/NgFor sur un tableau d'objets dans Angular2

Cordialement

Steve

Modèle de composant 

   <div>
        <label>Colour</label>
        <div>
            <select [(ngModel)]="car.colour"">
                <option *ngFor="let x of colours" [value]="x.id" [selected]="car.color.id == x.id">{{x.name}}</option>
            </select>
        </div>
    </div>

Composant 

import { Component, OnInit } from '@angular/core';
import {AbstractControl,FORM_DIRECTIVES } from '@angular/common';

@Component({
    selector:'dropdown',
    templateUrl:'app/components/dropdown/dropdown.component.html',
    directives:[FORM_DIRECTIVES]
})
export class DropdownComponent implements OnInit
{
    car:Car = new Car();
    colours = Array<Colour>();

    ngOnInit(): void {

        this.colours = Array<Colour>();
        this.colours.Push(new Colour(-1, 'Please select'));
        this.colours.Push(new Colour(1, 'Green'));
        this.colours.Push(new Colour(2, 'Pink'));
        this.colours.Push(new Colour(3, 'Orange'));
        this.colours.Push(new Colour(4, 'Black'));

        this.car = new Car();
        this.car.color = new Colour(-1,'');        
    }
}

export class Car
{
    color:Colour;
}

export class Colour
{
    constructor(id:number, name:string) {
        this.id=id;
        this.name=name;
    }

    id:number;
    name:string;
}
typescriptangularangular2-forms
50
CountZero

Régler car.colour sur la valeur que vous souhaitez sélectionner initialement fonctionne normalement.

Lorsque car.colour est défini, vous pouvez supprimer [selected]="car.color.id == x.id".

Si la valeur n'est pas une chaîne, [ngValue]="..." doit être utilisé. [value]="..." ne supporte que les chaînes.

50
Günter Zöchbauer

Valeur angulaire 2 simple dans la liste déroulante

Cela peut aider quelqu'un car je n'ai besoin que d'afficher la valeur sélectionnée, de ne pas déclarer quelque chose dans le composant, etc.

Si votre statut provient de la base de données, vous pouvez afficher la valeur sélectionnée de cette façon.

<div class="form-group">
    <label for="status">Status</label>
    <select class="form-control" name="status" [(ngModel)]="category.status">
       <option [value]="1" [selected]="category.status ==1">Active</option>
       <option [value]="0" [selected]="category.status ==0">In Active</option>
    </select>
</div>
13
Muhammad Shahzad

Merci pour le conseil Günter, cela m'a permis d'avancer dans la bonne direction. Il y avait une mauvaise orthographe de "couleur" dans ma solution qui posait problème et je devais utiliser "ngValue" et non "valeur" dans le modèle html.

Voici la solution complète utilisant des objets pour ngModel et les options de liste de sélection et évitant l’utilisation de l’attribut [selected].

J'ai mis à jour le Plunker pour afficher la solution de travail complète. https://plnkr.co/edit/yIVEeLK7PUY4VQFrR48g?p=preview

Modèle de composant 

 <div>
        <label>Colour</label>
        <div *ngIf="car != null">
            <select [(ngModel)]="car.colour">
                <option *ngFor="let x of colours" [ngValue]="x" >{{x.name}}</option>
            </select>
        </div>
    </div>

Composant 

import { Component, OnInit } from '@angular/core';
import {AbstractControl,FORM_DIRECTIVES } from '@angular/common';

@Component({
    selector:'dropdown',
    templateUrl:'app/components/dropdown/dropdown.component.html',
    directives:[FORM_DIRECTIVES]
})
export class DropdownComponent implements OnInit
{
    car:Car;
    colours: Array<Colour>;

    ngOnInit(): void {

        this.colours = Array<Colour>();
        this.colours.Push(new Colour(-1, 'Please select'));
        this.colours.Push(new Colour(1, 'Green'));
        this.colours.Push(new Colour(2, 'Pink'));

        this.car = new Car();
        this.car.colour = this.colours[1];        
    }
}

export class Car  
{
    colour:Colour;
}

export class Colour
{
    constructor(id:number, name:string) {
        this.id=id;
        this.name=name;
    }

    id:number;
    name:string;
}
12
CountZero

Cet exemple de solution est pour la forme réactive

 <select formControlName="preferredBankAccountId" class="form-control">
                <option *ngFor="let item of societyAccountDtos" [value]="item.societyAccountId" >
                  {{item.nickName}}
                </option>
              </select>

Dans le composant:

this.formGroup.patchValue({
        preferredBankAccountId:  object_id_to_be_pre_selected
      });

Vous pouvez également donner cette valeur à l'endroit où vous initialisez votre formGroup ou plus tard, en fonction de vos besoins.

Vous pouvez le faire en utilisant la liaison [(ngModel)] également là où vous ne devez pas initialiser votre formControl.

Exemple avec la liaison [(ngModel)]

 <select [(ngModel)]="matchedCity" formControlName="city" class="form-control input-sm">
                  <option *ngFor="let city of cities" [ngValue]="city">{{city.cityName}}</option>
                </select>

MatchedCity est ici un objet à l'intérieur d'une ville.

5
Nabin Kumar Khatiwada

Cela fonctionne pour moi.

<select formControlName="preferredBankAccountId" class="form-control" value="">
    <option value="">Please select</option>    
    <option *ngFor="let item of societyAccountDtos" [value]="item.societyAccountId" >{{item.nickName}}</option>
</select>

Pas sûr que ce soit valide ou non, corrigez-moi si c'est faux.
Corrigez-moi si cela ne devait pas être comme ça.

1
Dharam Mali