该实施例溶液用于反应性形式

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

此致

史蒂夫

组件模板

   <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

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

以下是使用ngModel对象和选择列表选项并避免使用[selected]属性的完整解决方案。

我更新了Plunker以显示完整的工作解决方案。 https://plnkr.co/edit/yIVEeLK7PUY4VQFrR48g?p=preview

组件模板

obj.vehicles

<强>组件

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

Answer 3

该实施例溶液用于反应性形式

{
    "apiVersion": "2017-05-10",
    "name": "nestedTemplate",
    "type": "Microsoft.Resources/deployments",
    "resourceGroup": "[parameters('secondResourceGroup')]",
    ...
}

在组件中：

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

您也可以在初始化formGroup或更高版本的位置提供此值，具体取决于您的要求。

您也可以使用[（ngModel）]绑定来完成此操作，而不必初始化formControl。

[（ngModel）]绑定的示例

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

此处，matchedCity是城市中的对象之一。

Answer 4

这适合我。

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

不确定这是否有效，如果错误，请纠正我如果不应该这样，请纠正我。

Answer 5

实际上，如果您使用ReactiveForms，我发现这种方式更容易实现：

如果表单是这样定义的：

public formName = new FormGroup({

    fieldName: new FormControl("test") //where "test is field default value"

});

然后就是您可以更改其值的方式：

this.formName.controls.fieldName.setValue("test 2"); //setting field value to "test 2"

Answer 6

如果您的值来自数据库，请以这种方式显示选定的值。

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

在我的情况下，我从我的 api 返回字符串值，例如：“35”，在我使用的 HTML 中

       <mat-select placeholder="State*" formControlName="states" [(ngModel)]="selectedState" (ngModelChange)="getDistricts()">
            <mat-option *ngFor="let state of formInputs.states" [value]="state.stateId">
              {{ state.stateName }}
            </mat-option>
          </mat-select>

像评论中提到的其他人一样，我猜值只会接受整数值。所以我所做的是在组件类中将字符串值转换为整数，如下所示

          var x = user.state;
          var y: number = +x;

然后像这样赋值

  this.EditProfileForm.get('states').setValue(y);

现在正确的值正在默认设置。

Answer 8

我想添加，[ngValue] =“...”支持字符串，但如果它代表一个数字，你需要添加简单的引号，如[ngValue] =“'...'”。这是对GünterZöchbauer答案的补充。

Answer 9

 <div class="col-md-3 col-sm-3">
                        <label>Outlet Ready</label>
                            <div>
                                <select class="form-control"  
                                     [(ngModel)]="selectedColor">
                               <option *ngFor="let x of colours" [ngValue]="x" >{{x.name}}</option>
                                </select>
                            </div>    
                    </div>

组件.ts

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;

这工作正常...:)

Angular 2 - 在下拉列表

9 个答案:

该实施例溶液用于反应性形式

[（ngModel）]绑定的示例