Angular 2 - Установка выбранного значения в выпадающем списке

У меня возникла проблема при предварительном выборе значений в раскрывающемся списке в 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;
}

Ответы

Ответ 1

Обычно устанавливается настройка car.colour на значение, которое вы хотите выбрать изначально.

Когда car.colour установлен, вы можете удалить [selected]="car.color.id == x.id".

Если значение не является строкой [ngValue]="...", необходимо использовать. [value]="..." поддерживает только строки.

Ответ 2

Angular 2 простое выпадающее меню

Это может помочь кому-то, поскольку мне нужно показывать только выбранное значение, не нужно объявлять что-то в компоненте и т.д.

Если ваш статус поступает из базы данных, вы можете показать выбранное значение таким образом.

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

Ответ 3

Спасибо за отзыв Günter, он заставил меня двигаться в правильном направлении. В моем решении было неправильное совпадение "цвета", которое вызывало проблемы, и мне нужно было использовать "ngValue", а не "значение" в шаблоне html.

Вот полное решение с использованием объектов для ngModel и выбора опций списка и избежания использования атрибута [selected].

Я обновил Plunker, чтобы показать полное рабочее решение. https://plnkr.co/edit/yIVEeLK7PUY4VQFrR48g?p=preview

Шаблон компонента

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

Компонент

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