typescript - Angular 2 - Ange valt värde i rullgardinslista

Jag har stött på ett problem med att förhandsvälja värden i en rullgardinslista i Angular 2.

Jag satte en array med färger i komponenten som jag framgångsrikt binder till rullgardinsmenyn. Problemet jag upplever är med att förinställa ett värde vid sidans initiering.

Raden [selected]="car.color.id == x.id" borde välja det värde som har satts på bilmodellen this.car.color=new Colour(-1,'');, men detta fungerar endast när jag sätter bilfärgs-id till det sista objektet i listan (i det här fallet svart) this.car.color=new Colour(4,'');

Jag använder den senaste versionen av Angular (rc3) och har upplevt samma problem i rc1 och rc2.

Här är en plunker som visar problemet.

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

En annan märklig aspekt är att när man tittar på metadata har Angular satt det valda värdet till sant.

Men rullgardinsmenyn ser fortfarande tom ut.

Det verkar vara ett separat problem från dessa relaterade frågor.

Angular 2 Sätt startvärde för select

Binda select-element till objekt i Angular 2

Hur man använder select/option/NgFor på en array av objekt i Angular2

Hälsningar

Steve

Komponentmall

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

Komponent

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

Svar #1

Att sätta car.colour till det värde du vill ha förvalt fungerar vanligtvis.

När car.colour är inställt, kan du ta bort [selected]="car.color.id == x.id".

Om värdet inte är en sträng måste [ngValue]="..." användas. [value]="..." stöder endast strängar.

Svar #2

Angular 2 enkelt dropdown valt värde

Det kan hjälpa någon eftersom jag endast behöver visa valt värde, behöver inte deklarera något i komponenten osv.

Om din status kommer från databasen kan du visa det valda värdet på detta sätt.

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

Svar #3

Tack för tipset Günter, det fick mig att gå åt rätt håll. Det var en felstavning av 'färg' i min lösning som orsakade problem och jag behövde använda 'ngValue' istället för 'värde' i mallens HTML.

Här är den kompletta lösningen som använder objekt för ngModel och alternativ i rullistan och undviker användning av attributet [selected].

Jag har uppdaterat Plunker för att visa den fullständiga fungerande lösningen. https://plnkr.co/edit/yIVEeLK7PUY4VQFrR48g?p=preview

Komponentmall

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

Komponent

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

Svar #4

Denna exempel lösning är för reaktivt formulär

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

I komponenten:

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

Du kan också ge detta värde när du initialiserar ditt formGroup eller senare, beroende på ditt krav.

Du kan göra detta genom att använda [(ngModel)]-bindning också där du inte behöver initiera din formControl.

Exempel med [(ngModel)]-bindning

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

Här är matchedCity ett av objekten inom städer.

Relaterade artiklar