У меня возникла проблема при предварительном выборе значений в раскрывающемся списке в Angular 2.
Я устанавливаю массив цветов в компоненте, который я привязываю успешно к выпадающему списку. Проблема, с которой я столкнулся, заключается в предварительном выборе значения на странице init.
Линия [selected]="car.color.id == x.id"
должна выбирать значение, установленное в модели автомобиля this.car.color = new Colour(-1,'');
, однако это работает только при установке идентификатора цвета автомобиля на последний элемент в списке (в данном случае черный) this.car.color = new Colour(4,'');
Я использую последнюю версию Angular (rc3) и испытываю те же проблемы в rc1 и rc2.
Вот плукер, показывающий проблему.
https://plnkr.co/edit/yIVEeLK7PUY4VQFrR48g?p=preview
Другой нечетный аспект заключается в том, что при просмотре метаданных Angular установлено значение true.
Но выпадающее меню по-прежнему остается пустым.
Кажется, это отдельная проблема из этих связанных вопросов.
Angular 2 Задайте начальное значение для выбора
Привязка к элементу привязки к объекту в Angular 2
Как использовать select/option/NgFor для массива объектов в 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;
}