Angulaire 2 simple liste déroulante valeur sélectionnée

il peut aider quelqu'un que j'ai besoin de montrer seulement la valeur sélectionnée, n'ont pas besoin de déclarer quelque chose dans le composant et 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>

Merci pour le tuyau Günter, il m'a fait avancer dans la bonne direction. Il y avait une faute d'orthographe de 'couleur' dans ma solution qui causait des problèmes et j'ai dû utiliser 'ngValue' et non 'value' dans le modèle html.

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

j'ai mis à jour le piston pour montrer la solution complète de travail. 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;
}

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 où vous initialisez votre formGroup ou plus tard,selon votre besoin.

vous pouvez le faire en utilisant la liaison [(ngModel)] aussi là où vous n'avez pas à initialiser votre formControl.

exemple avec 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 dans les villes.

ça me va.

<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 c'est valable ou pas, corrigez-moi si c'est faux.

Corrigez-moi si cela ne devrait pas être comme ça.

je voudrais ajouter, [ngValue]="..."supportez les chaînes, mais vous devez ajouter des guillemets simples si cela représente un nombre, comme [ngValue]="'...'". Il s'agissait de compléter la réponse de Günter Zöchbauer.