Angular 2 Dropdown Options Valore predefinito

Aggiungi un’associazione alla proprietà selected , in questo modo:

 {{workout.name}} 

Se assegni il valore predefinito a selectedWorkout e usi [ngValue] (che permette di usare oggetti come valore – altrimenti solo la stringa è supportata) allora dovrebbe fare solo ciò che vuoi:

   {{workout.name}}   

Assicurati che il valore che assegni a selectedWorkout sia uguale a quello usato negli workouts . Un’altra istanza di object anche con le stesse proprietà e valori non verrà riconosciuta. Solo l’id quadro dell’object è selezionata.

aggiornare

Supporto angular aggiunto per compareWith , che semplifica l’impostazione del valore predefinito quando si utilizza [ngValue] (per i valori dell’object)

Dai documenti https://angular.io/api/forms/SelectControlValueAccessor

   {{country.name}}   

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

In questo modo un’istanza object (nuova) diversa può essere impostata come valore predefinito e compareFn per capire se devono essere considerati uguali (ad esempio se la proprietà id è la stessa.

basta impostare il valore del modello sul valore predefinito desiderato in questo modo:

 selectedWorkout = 'back' 

Ho creato un fork di @Douglas ‘plnkr qui per dimostrare i vari modi per ottenere il comportamento desiderato in angular2.

Aggiungi questo codice alla posizione o dell’elenco di selezione.

Select

Puoi fare in questo modo

 {{workout.name}} 

o in questo modo

  {{workout.name}} 

oppure puoi impostare deafult vlaue in questo modo

 Please Select {{workout.name}} 

o

 Please Select {{workout.name}} 

Utilizzare l’indice per mostrare il primo valore come predefinito

 {{workout.name}} 

Faticato un po ‘con questo, ma alla fine ho trovato la seguente soluzione … forse aiuterà qualcuno.

Modello HTML:

  {{option.text}}  

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

Secondo https://angular.io/api/forms/SelectControlValueAccessor hai solo bisogno di quanto segue:

theView.html:

   {{country.name}}   

theComponent.ts

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

Puoi usare [ngModel] invece di [(ngModel)] ed è Ok

  {{workout.name}}  

Puoi fare come sopra:

   {{workout.name}}   

Nel codice precedente, come potete vedere, l’attributo selezionato dell’opzione ripetuta è impostato sul controllo dell’indice del ciclo ripetuto di lista. [attr. ] è usato per impostare l’attributo html in angular2.

Un altro approccio imposterà il valore del modello nel file typescript come:

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

Compilando altri post, ecco cosa funziona in Angular2 quickstart,

Per impostare il DOM predefinito: insieme a *ngFor , utilizzare un’istruzione condizionale nell’attributo selezionato .

Per impostare il valore predefinito del Control : usa il suo argomento del costruttore. Altrimenti prima di un onchange quando l’utente seleziona nuovamente un’opzione, che imposta il valore del controllo con l’attributo del valore dell’opzione selezionata, il valore di controllo sarà nullo.

script:

 import {ControlGroup,Control} from '@angular/common'; ... export class MyComponent{ myForm: ControlGroup; myArray: Array 

markup:

 
  {{eachObj.myText}}  
 Save  

Aggiungi la proprietà di associazione selezionata, ma assicurati di renderla nulla, per altri campi, ad esempio:

 {{workout.name}} 

Ora funzionerà

Aggiungi alla risposta di @Matthijs, assicurati che il tuo elemento select abbia un attributo name e il suo name sia univoco nel tuo template html. Angular 2 utilizza il nome di input per aggiornare le modifiche. Pertanto, se ci sono nomi duplicati o non vi è alcun nome allegato all’elemento di input, l’associazione fallirà.

  {{workout.name}}  

Se stai usando un modulo, dovrebbe esserci un campo name all’interno del tag select .

Tutto quello che devi fare è solo aggiungere value al tag option .

selectedWorkout valore selectedWorkout Workout deve essere “back”, ed è fatto.

Se non vuoi il binding a 2 vie tramite [(ngModel)], fai questo:

  {{ acct.name }}  

Appena testato sul mio progetto su Angular 4 e funziona! AccountList è una matrice di oggetti Account in cui il nome è una proprietà dell’account.

Osservazione interessante:
[ngValue] = “acct” esercita lo stesso risultato di [ngValue] = “acct.name”.
Non so come l’angular 4 lo compia!

Passaggio: 1 Crea proprietà declare class

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

Stelo: 2 La tua class di componenti

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

Passaggio: 3 Visualizza il file .html

   {{list.label}}   

Produzione:

funziona alla grande come visto di seguito:

  Selecione um tipo {{tipo?.nome}}  

Ho affrontato questo problema prima e l’ho risolto con un modo di soluzione leggermente diverso

Per il tuo Component.html

   {{workout.name}}  

Quindi nel componente.ts è ansible rilevare l’opzione selezionata per

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