typescript – 角度2 – 在下拉列表中设置所选值

我在组件中设置一个颜色数组,我将其成功绑定到下拉列表中.我遇到的问题是在页面init上预先选择一个值.

应该选择汽车模型’this.car.color = new Color(-1,”)上设置的值,该行'[selected] =“car.color.id == x.id” “然而,这只有当我将车辆颜色id设置为列表中的最后一个项目(在这种情况下为黑色)时才有效.’this.car.color = new Color(4,”);’

我正在使用最新版本的Angular(rc3),并在rc1和rc2中遇到过相同的问题.

这是一个显示问题的广告.

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

另一个奇怪的方面是,当查看元数据时,Angular将所选值设置为true.

但是下拉列表仍然显示为空.

这似乎是这些相关问题的独立问题.

Angular 2 Set begin value of select

Binding select element to object in Angular 2

How to use select/option/NgFor on an array of objects in Angular2

问候

史蒂夫

组件模板

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

零件

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