typescript - working - selected angular option




Angular 2-Definindo o valor selecionado na lista suspensa (4)

Ocorreu um problema ao pré-selecionar valores em uma lista suspensa no Angular 2.

Defino uma matriz de cores no componente que vinculo com sucesso à lista suspensa. O problema que estou enfrentando é com a pré-seleção de um valor na página init.

A linha [selected]="car.color.id == x.id" deve estar selecionando o valor que foi definido no modelo de carro this.car.color = new Colour(-1,''); no entanto, isso só funciona quando defino a identificação da cor do carro no último item da lista (neste caso, preto) this.car.color = new Colour(4,'');

Estou usando a versão mais recente do Angular (rc3) e tive os mesmos problemas em rc1 e rc2.

Aqui está um plunker mostrando o problema.

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

Outro aspecto estranho é que, ao examinar os metadados, o Angular configurou o valor selecionado como true.

Mas o menu suspenso ainda parece vazio.

Parece ser um problema separado dessas perguntas relacionadas.

Angular 2 Defina o valor inicial de seleção

Vincular elemento selecionado ao objeto no Angular 2

Como usar select / option / NgFor em uma matriz de objetos no Angular2

Saudações

Steve

Modelo de componente

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

Este exemplo de solução é para forma reativa

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

No componente:

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

Você também pode atribuir esse valor ao inicializar seu formGroup ou posterior, dependendo de seus requisitos.

Você pode fazer isso usando a ligação [(ngModel)] também quando não precisar inicializar seu formControl.

Exemplo com ligação [(ngModel)]

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

Aqui, matchedCity é um objeto dentro das cidades.


Valor selecionado suspenso simples angular 2

Pode ajudar alguém, pois eu preciso mostrar apenas o valor selecionado, não preciso declarar algo no componente e etc.

Se o seu status for proveniente do banco de dados, você poderá mostrar o valor selecionado dessa maneira.

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

Eu gostaria de adicionar, [ngValue] = "..." suporte strings, mas você precisa adicionar aspas simples se representar um número, como [ngValue] = "'...'". Foi para complementar a resposta de Günter Zöchbauer.


Isso funciona para mim.

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

Não tenho certeza se isso é válido ou não, me corrija se estiver errado.
Corrija-me se isso não deveria ser assim.





angular2-forms