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

问题描述

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

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

行 [selected]="car.color.id == x.id" 应该选择已在汽车模型上设置的值 this.car.color =new Colour(-1,''); 但是，这只适用于我将汽车颜色 ID 设置为列表中的最后一项(在本例中为黑色)this.car.color = new Colour(4,'');

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

这是一个显示问题的plunker.

但下拉菜单仍然显示为空.

这似乎是与这些相关问题不同的问题.

Angular 2 设置选择的开始值

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

如何使用在 Angular2 中的对象数组上选择/选项/NgFor

问候

史蒂夫

组件模板

 
<label>颜色</label><div><select [(ngModel)]="car.colour""><option *ngFor="let x of colours" [value]="x.id" [selected]="car.color.id == x.id">{{x.name}}</option></选择>

组件

import { Component, OnInit } from '@angular/core';从@angular/common"导入 {AbstractControl,FORM_DIRECTIVES };@成分({选择器:'下拉'，templateUrl:'app/components/dropdown/dropdown.component.html',指令:[FORM_DIRECIVES]})导出类 DropdownComponent 实现 OnInit{汽车:汽车 = 新汽车()；颜色 = 数组<颜色>();ngOnInit(): 无效 {this.colours = Array();this.colours.push(new Colour(-1, '请选择'));this.colours.push(new Colour(1, 'Green'));this.colours.push(new Colour(2, '粉红色'));this.colours.push(new Colour(3, 'Orange'));this.colours.push(new Colour(4, 'Black'));this.car = new Car();this.car.color = new Colour(-1,'');}}出口类汽车{颜色:颜色；}导出类颜色{构造函数(ID:编号，名称:字符串){this.id=id;this.name=name;}身份证号码;名称:字符串；}

解决方案

将 car.colour 设置为您希望最初选择的值通常有效.

设置car.colour后，可以去掉[selected]="car.color.id == x.id".

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

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.

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,'');

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

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.

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

Regards

Steve

Component template

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

Component

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

解决方案

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

When car.colour is set, you can remove [selected]="car.color.id == x.id".

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

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