Angular 2 - Festlegen des ausgewählten Werts in der Dropdown-Liste
Ich bin auf ein Problem bei der Vorauswahl von Werten in einer Dropdown-Liste in Angular 2 gestoßen.
Ich habe ein Array von Farben in der Komponente festgelegt, die ich erfolgreich an die Dropdown-Liste gebunden habe. Ich habe ein Problem mit der Vorauswahl eines Wertes auf der Seite init.
Die Linie[selected]="car.color.id == x.id"
sollte den Wert auswählen, der für das Automodell eingestellt wurdethis.car.color = new Colour(-1,'');
Dies funktioniert jedoch nur, wenn ich die Fahrzeugfarben-ID auf den letzten Eintrag in der Liste gesetzt habe (in diesem Fall schwarz).this.car.color = new Colour(4,'');
Ich verwende die neueste Version von Angular (RC3) und habe die gleichen Probleme in RC1 und RC2.
Hier ist ein Plunker, der das Problem zeigt.
https: //plnkr.co/edit/yIVEeLK7PUY4VQFrR48g? p = preview
Ein weiterer merkwürdiger Aspekt ist, dass Angular beim Betrachten der Metadaten den ausgewählten Wert auf true gesetzt hat.
Aber das Dropdown-Menü ist immer noch leer.
Es scheint ein anderes Problem als diese verwandten Fragen zu sein.
Angular 2 Setze Anfangswert von select
Binden des ausgewählten Elements an ein Objekt in Winkel 2
So verwenden Sie select / option / NgFor für ein Array von Objekten in Angular2
Grüß
Steve
Component template
<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;
}