Angular 2 - 在下拉列表中设置选定值

Question

我在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中遇到过相同的问题.

这是一个显示问题的掠夺者.

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

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

但下拉仍然显得空洞.

这些相关问题似乎是一个单独的问题.

Angular 2设置select的开始值

将选择元素绑定到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;
}

Answer 1

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

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

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

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

Answer 3

感谢Günter提示,它让我朝着正确的方向前进.在我的解决方案中有一个错误匹配的"颜色"拼写导致问题,我需要在模板html中使用'ngValue'而不是'value'.

以下是使用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;
}

Answer 4

该示例解决方案适用于反应形式

 <select formControlName="preferredBankAccountId" class="form-control">
                <option *ngFor="let item of societyAccountDtos" [value]="item.societyAccountId" >
                  {{item.nickName}}
                </option>
              </select>

在组件中：

this.formGroup.patchValue({
        preferredBankAccountId:  object_id_to_be_pre_selected
      });

您还可以根据需要在初始化formGroup或更高版本的位置提供此值。

您也可以通过使用[[ngModel）]绑定来实现此目的，而不必初始化formControl。

具有[（ngModel）]绑定的示例

 <select [(ngModel)]="matchedCity" formControlName="city" class="form-control input-sm">
                  <option *ngFor="let city of cities" [ngValue]="city">{{city.cityName}}</option>
                </select>

在这里，matchedCity是城市中的对象之一。