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

Question

J'ai rencontré un problème lors de la présélection de valeurs dans une liste déroulante en Angular 2.

J'ai défini 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 à l'ouverture de la page.

La ligne [selected]="car.color.id == x.id" doit sélectionner la valeur qui a été fixée sur le modèle de la voiture. this.car.color = new Colour(-1,''); Cependant, cela ne fonctionne que si je fixe l'identifiant de la couleur de la voiture au dernier élément de la liste (dans ce cas, noir). this.car.color = new Colour(4,'');

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

Voici un plunker qui montre le problème.

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

Un autre aspect étrange est qu'en regardant les méta-données, Angular a mis la valeur sélectionnée à true.

Mais la liste déroulante reste vide.

Il semble qu'il s'agisse d'un problème distinct de ces questions connexes.

Angulaire 2 Définir la valeur de départ de la sélection

Lier un élément de sélection à un objet en Angular 2

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

Salutations

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;
}

Answer 1

Réglage de car.colour à la valeur que vous souhaitez voir sélectionnée initialement fonctionne généralement.

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

Si la valeur n'est pas une chaîne de caractères [ngValue]="..." doit être utilisé. [value]="..." ne prend en charge que les chaînes de caractères.

Answer 2

Angular 2 simple dropdown valeur sélectionnée

Cela peut aider quelqu'un car j'ai besoin d'afficher uniquement la valeur sélectionnée, je n'ai pas besoin de 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 manière.

<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>

Answer 3

Merci pour le conseil Günter, cela m'a fait avancer dans la bonne direction. Il y avait une erreur d'orthographe de "color" dans ma solution qui causait des problèmes et je devais utiliser "ngValue" et non "value" dans le modèle html.

Voici la solution complète qui utilise des objets pour le ngModel et les options de la liste de sélection et qui évite l'utilisation de l'attribut [selected].

J'ai mis à jour le Plunker pour montrer la solution complète et fonctionnelle. 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;
}

Answer 4

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 lorsque vous initialisez votre formGroup ou plus tard, en fonction de vos besoins.

Pour ce faire, vous pouvez utiliser la liaison [(ngModel)], qui vous évite d'avoir à 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>

Ici, matchedCity est un objet parmi les villes.

Answer 5

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>

Je ne suis pas sûr que ce soit valable ou non, corrigez-moi si c'est faux.
Corrigez-moi si cela ne devrait pas être comme ça.