Valor padrão das opções suspensas do Angular 2

Em Angular 1 eu poderia selecionar a opção padrão para uma checkbox suspensa usando o seguinte:

  

Em Angular 2 eu tenho:

  {{workout.name}}  

Como eu poderia selecionar uma opção padrão, dado que meus dados de opção são:

[{name: 'arm'}, {name: 'back'}, {name:'leg'}] e meu valor para o qual eu assumi o padrão está de back ?

Adicione uma binding à propriedade selected , assim:

  

Se você atribuir o valor padrão a selectedWorkout e usar [ngValue] (o que permite usar objects como valor – caso contrário, somente a string é suportada), então ele deve apenas fazer o que você deseja:

  

Assegure-se de que o valor atribuído a selectedWorkout seja a mesma instância que a usada nos workouts . Outra instância de object, mesmo com as mesmas propriedades e valores, não será reconhecida. Apenas a identidade do object é verificada.

atualizar

Angular adicionou suporte para compareWith , que torna mais fácil definir o valor padrão quando [ngValue] é usado (para valores de objects)

Dos documentos https://angular.io/api/forms/SelectControlValueAccessor

  
 compareFn(c1: Country, c2: Country): boolean { return c1 && c2 ? c1.id === c2.id : c1 === c2; } 

Dessa forma, uma instância de object diferente (nova) pode ser definida como valor padrão e compareFn é usado para descobrir se eles devem ser considerados iguais (por exemplo, se a propriedade id for a mesma.

basta definir o valor do modelo para o padrão desejado assim:

 selectedWorkout = 'back' 

Eu criei um fork do @douglas ‘plnkr aqui para demonstrar as várias maneiras de obter o comportamento desejado em angular2.

Adicione este código na posição o da lista de seleção.

Você pode fazer assim

  

ou assim

   

ou você pode definir o resultado surdo dessa maneira

   

ou

   

Use o índice para mostrar o primeiro valor como padrão

  

Lutou um pouco com este, mas acabou com a seguinte solução … talvez ajude alguém.

Modelo HTML:

  

Componente:

 import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core'; export class UifDropdownComponent implements OnInit { @Input() uifOptions: {value: string, text: string}[]; @Input() uifSelectedValue: string = ''; @Output() uifSelectedValueChange:EventEmitter = new EventEmitter(); uifSelected: {value: string, text: string} = {'value':'', 'text':''}; constructor() { } onValueChanged(target: HTMLSelectElement):void { this.uifSelectedValue = target.value; this.uifSelectedValueChange.emit(this.uifSelectedValue); } ngOnInit() { this.uifSelected = this.uifOptions.filter(o => o.value == this.uifSelectedValue)[0]; } } 

De acordo com https://angular.io/api/forms/SelectControlValueAccessor você só precisa do seguinte:

theView.html:

  

theComponent.ts

 import { SelectControlValueAccessor } from '@angular/forms'; compareFn(c1: Country, c2: Country): boolean { return c1 && c2 ? c1.id === c2.id : c1 === c2; } 

Você pode usar esse [ngModel] vez de [(ngModel)] e está tudo bem

  

Você pode fazer como acima:

  

No código acima, como você pode ver, o atributo selecionado da opção de repetição é definido no índice de verificação do loop de repetição da lista. [attr. ] é usado para configurar o atributo html em angular2.

Outra abordagem será definir o valor do modelo no arquivo typescript como:

 this.selectedWorkout = this.workouts.length > 0 ? this.workouts[0].name : 'No data found';//'arm' 

Completando as outras postagens, aqui está o que funciona no Angular2 quickstart,

Para definir o padrão do DOM: junto com *ngFor , use uma instrução condicional no atributo selected do .

Para definir o padrão do Control : use seu argumento de construtor. Caso contrário, antes de um onchange quando o usuário seleciona novamente uma opção, que define o valor do controle com o atributo de valor da opção selecionada, o valor de controle será nulo.

roteiro:

 import {ControlGroup,Control} from '@angular/common'; ... export class MyComponent{ myForm: ControlGroup; myArray: Array = [obj1,obj2,obj3]; myDefault: Object = myArray[1]; //or obj2 ngOnInit(){ //override this.myForm = new ControlGroup({'myDropdown': new Control(this.myDefault)}); } myOnSubmit(){ console.log(this.myForm.value.myDropdown); //returns the control's value } } 

marcação:

 

Adicione a propriedade de binding selecionada, mas certifique-se de torná-la nula, para outros campos, por exemplo:

  

Agora vai funcionar

Adicione à resposta do @Matthijs, por favor, certifique-se que o seu elemento select tem um atributo name e seu name é único em seu template html. Angular 2 está usando o nome de input para atualizar as alterações. Assim, se houver nomes duplicados ou não houver nenhum nome associado ao elemento de input, a binding falhará.

  

Se você estiver usando o formulário, deve haver um campo de name dentro da tag de select .

Tudo o que você precisa fazer é adicionar value à tag de option .

selectedWorkout valor selectedWorkout deve estar “atrasado” e pronto.

Se você não quiser a binding bidirecional via [(ngModel)], faça o seguinte:

  

Apenas testei no meu projeto no Angular 4 e funciona! O accountsList é uma matriz de objects Account em que name é uma propriedade de Account.

Observação interessante:
[ngValue] = “acct” exerce o mesmo resultado que [ngValue] = “acct.name”.
Não sei como Angular 4 consegue isso!

Etapa: 1 Criar class de declaração de propriedades

 export class Task { title: string; priority: Array; comment: string; constructor() { this.title = ''; this.priority = []; this.comment = ''; } } 

Haste: 2 Sua Classe Componente

 import { Task } from './task'; export class TaskComponent implements OnInit { priorityList: Array = [ { value: 0, label: '✪' }, { value: 1, label: '★' }, { value: 2, label: '★★' }, { value: 3, label: '★★★' }, { value: 4, label: '★★★★' }, { value: 5, label: '★★★★★' } ]; taskModel: Task = new Task(); constructor(private taskService: TaskService) { } ngOnInit() { this.taskModel.priority = [3]; // index number } } 

Passo: 3 Ver Arquivo .html

  

Saída:

insira a descrição da imagem aqui

funciona muito bem como visto abaixo:

  

Eu enfrentei este problema antes e corrigi-lo com varias maneiras simples de contornar

Para o seu Component.html

   

Em seguida, no seu component.ts você pode detectar a opção selecionada por

 gotit(name:string) { //Use it from hare console.log(name); }