typescript - selected select angular 2

Angular 2: configuración del valor seleccionado en la lista desplegable

Question

Me he encontrado con un problema al preseleccionar valores en una lista desplegable en Angular 2.

Configuré una matriz de colores en el componente que uní con éxito a la lista desplegable. El problema que estoy experimentando es preseleccionar un valor en la página init.

La línea [selected]="car.color.id == x.id" debe seleccionar el valor que se ha establecido en el modelo de automóvil this.car.color = new Colour(-1,''''); sin embargo, esto solo funciona cuando configuro la identificación del color del automóvil en el último elemento de la lista (en este caso negro) this.car.color = new Colour(4,'''');

Estoy usando la última versión de Angular (rc3) y he experimentado los mismos problemas en rc1 y rc2.

Aquí hay un plunker que muestra el problema.

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

Otro aspecto extraño es que al mirar los metadatos, Angular ha establecido el valor seleccionado en verdadero.

Pero el menú desplegable todavía parece vacío.

Parece ser un problema separado de estas preguntas relacionadas.

Angular 2 Establecer el valor inicial de select

Enlace del elemento seleccionado al objeto en Angular 2

Cómo usar select / option / NgFor en una matriz de objetos en Angular2

Saludos

Steve

Plantilla de componentes

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

Componente

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

Esta solución de ejemplo es para forma reactiva

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

En el componente:

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

También puede dar este valor cuando inicializa su formGroup o posterior, según sus requisitos.

Puede hacer esto usando el enlace [(ngModel)] también donde no tiene que inicializar su control de formulario.

Ejemplo con enlace [(ngModel)]

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

Aquí, matchedCity es uno de los objetos dentro de las ciudades.

Answer 2

Valor seleccionado del menú desplegable simple angular 2

Puede ayudar a alguien, ya que solo necesito mostrar el valor seleccionado, no necesito declarar algo en el componente, etc.

Si su estado proviene de la base de datos, puede mostrar el valor seleccionado de esta manera.

<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

Establecer car.colour en el valor que desea haber seleccionado inicialmente generalmente funciona.

Cuando car.colour está configurado, puede eliminar [selected]="car.color.id == x.id" .

Si el valor no es una cadena [ngValue]="..." debe usarse. [value]="..." solo admite cadenas.

Answer 4

Esto funciona para mi.

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

No estoy seguro de si esto es válido o no, corrígeme si está mal.
Corrígeme si esto no fuera así.

Answer 5

Gracias por el consejo Günter, me hizo moverme en la dirección correcta. Hubo una ortografía mal combinada de ''color'' en mi solución que estaba causando problemas y necesitaba usar ''ngValue'' no ''value'' en la plantilla html.

Aquí está la solución completa que usa objetos para ngModel y selecciona las opciones de lista y evita el uso del atributo [seleccionado].

He actualizado Plunker para mostrar la solución de trabajo completa. https://plnkr.co/edit/yIVEeLK7PUY4VQFrR48g?p=preview

Plantilla de componentes

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

Componente

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 6

Me gustaría agregar, [ngValue] = "..." admite cadenas, pero necesita agregar comillas simples si representa un número, como [ngValue] = "''...''". Fue para complementar la respuesta de Günter Zöchbauer.