我在 Angular 2 的下拉列表中预选择值时遇到了问题。
我在组件中设置了一个颜色数组，并将其成功绑定到下拉列表。我遇到的问题是在页面初始化上预先选择一个值。
线路[selected]="car.color.id == x.id"应该选择已在车型上设置的值this.car.color = new Colour(-1,'');但是，只有当我将汽车颜色 ID 设置为列表中的最后一项（在本例中为黑色）时，这才有效this.car.color = new Colour(4,'');
我正在使用最新版本的 Angular (rc3)，并且在 rc1 和 rc2 中遇到了相同的问题。
这是一个显示问题的 plunker。
https://plnkr.co/edit/yIVEeLK7PUY4VQFrR48g?p=preview https://plnkr.co/edit/yIVEeLK7PUY4VQFrR48g?p=preview
另一个奇怪的方面是，当查看元数据时，Angular 已将所选值设置为 true。
但下拉菜单仍然显示为空。
这似乎是与这些相关问题不同的问题。
Angular 2 设置选择的开始值 https://stackoverflow.com/questions/36723173/angular-2-set-begin-value-of-select
在 Angular 2 中将选择元素绑定到对象 https://stackoverflow.com/questions/35945001/binding-select-element-to-object-in-angular-2
如何在 Angular2 中的对象数组上使用 select/option/NgFor https://stackoverflow.com/questions/33181936/how-to-use-select-option-ngfor-on-an-array-of-objects-in-angular2
Regards
Steve
组件模板
<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;
}
