Angular 2-在下拉列表上设置选定的值 [英] Angular 2 - Setting selected value on dropdown list

问题描述

我在Angular 2的下拉列表中预先选择值时遇到了问题.

I have run into an issue in pre-selecting values on a dropdown list in Angular 2.

我在组件中设置了一个颜色数组，该数组成功绑定到了下拉列表.我遇到的问题是在页面初始化时预先选择一个值.

I set an array of colours in the component which I bind successfully to the dropdown list. The issue I'm experiencing is with pre-selecting a value on page init.

第[selected]="car.color.id == x.id"行应选择在汽车型号this.car.color = new Colour(-1,'');上设置的值，但这仅在将汽车颜色ID设置为列表中的最后一项(在这种情况下为黑色)时有效>

The line [selected]="car.color.id == x.id" should be selecting the value which has been set on the car model this.car.color = new Colour(-1,''); however this only works when I set the car colour id to the last item in the list (in this case black) this.car.color = new Colour(4,'');

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

I am using the latest version of Angular (rc3) and have experienced the same issues in rc1 and rc2.

这里是一个显示问题的小伙子.

Here is a plunker showing the issue.

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

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

Another odd aspect is that when looking at the meta data Angular has set the selected value to true.

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

But the dropdown still appears empty.

这似乎是与这些相关问题分开的问题.

It appears to be a seperate issue from these related questions.

角度2设置选择的开始值

将选择元素绑定到Angular 2中的对象

如何使用在Angular2中的对象数组上进行select/option/NgFor

致谢

史蒂夫

组件模板

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

推荐答案

将car.colour设置为您想要最初选择的值通常是可行的.

Setting car.colour to the value you want to have initially selected usually works.

设置car.colour后，您可以删除[selected]="car.color.id == x.id".

如果该值不是字符串，则必须使用[ngValue]="...". [value]="..."仅支持字符串.

If the value is not a string [ngValue]="..." must be used. [value]="..." only supports strings.

这篇关于Angular 2-在下拉列表上设置选定的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！