Winkel 2 Dropdown-Optionen Standardwert

In Winkel 1 konnte ich die Standardoption für ein Dropdown-Feld wie folgt auswählen:

<select 
    data-ng-model="carSelection"
    data-ng-options = "x.make for x in cars" data-ng-selected="$first">
</select>

In Angular 2 habe ich:

<select class="form-control" [(ngModel)]="selectedWorkout" (ngModelChange)="updateWorkout($event)">
    <option *ngFor="#workout of workouts">{{workout.name}}</option>
</select>

Wie kann ich eine Standardoption auswählen, wenn meine Optionsdaten wie folgt lauten:

[{name: 'arm'}, {name: 'back'}, {name:'leg'}]und mein Wert, den ich standardmäßig aktivieren möchte, ist back?

Fügen Sie der selectedEigenschaft eine Bindung wie folgt hinzu:

<option *ngFor="#workout of workouts" 
    [selected]="workout.name == 'back'">{{workout.name}}</option>

Wenn Sie den Standardwert zuweisen selectedWorkoutund verwenden [ngValue](wodurch Objekte als Wert verwendet werden können - andernfalls wird nur eine Zeichenfolge unterstützt), sollte dies genau das tun, was Sie möchten:

<select class="form-control" name="sel" 
    [(ngModel)]="selectedWorkout" 
    (ngModelChange)="updateWorkout($event)">
  <option *ngFor="let workout of workouts" [ngValue]="workout">
    {{workout.name}}
  </option>
</select>

Stellen Sie sicher, dass der Wert, dem Sie zuweisen, selectedWorkoutdieselbe Instanz ist wie der in workouts. Eine andere Objektinstanz mit denselben Eigenschaften und Werten wird nicht erkannt. Es wird nur die Objektidentität überprüft.

aktualisieren

Angular hat Unterstützung für hinzugefügt compareWith, was es einfacher macht, den Standardwert festzulegen, wenn er [ngValue]verwendet wird (für Objektwerte).

Aus den Dokumenten https://angular.io/api/forms/SelectControlValueAccessor

<select [compareWith]="compareFn"  [(ngModel)]="selectedCountries">
    <option *ngFor="let country of countries" [ngValue]="country">
        {{country.name}}
    </option>
</select>

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

Auf diese Weise kann eine andere (neue) Objektinstanz als Standardwert festgelegt werden und compareFnwird verwendet, um herauszufinden, ob sie als gleich angesehen werden sollten (z. B. wenn die idEigenschaft identisch ist.

Stellen Sie einfach den Wert des Modells auf den gewünschten Standardwert ein:

selectedWorkout = 'back'

Ich habe hier eine Gabelung von @Douglas 'plnkr erstellt , um die verschiedenen Möglichkeiten zu demonstrieren, um das gewünschte Verhalten in angle2 zu erzielen.

Fügen Sie diesen Code an der Position o der Auswahlliste hinzu.

<option [ngValue]="undefined" selected>Select</option>

Sie können sich folgendermaßen nähern:

<option *ngFor="let workout of workouts" [value]="workout.name">{{workout.name}}</option>

oder so:

  <option *ngFor="let workout of workouts" [attr.value]="workout.name" [attr.selected]="workout.name == 'leg' ? true : null">{{workout.name}}</option>

oder Sie können den Standardwert folgendermaßen festlegen:

<option [value]="null">Please Select</option>
<option *ngFor="let workout of workouts" [value]="workout.name">{{workout.name}}</option>

oder

<option [value]="0">Please Select</option>
<option *ngFor="let workout of workouts" [value]="workout.name">{{workout.name}}</option>

Verwenden Sie den Index, um den ersten Wert als Standard anzuzeigen

<option *ngFor="let workout of workouts; #i = index" [selected]="i == 0">{{workout.name}}</option>

Laut https://angular.io/api/forms/SelectControlValueAccessor benötigen Sie lediglich Folgendes:

theView.html:

<select [compareWith]="compareFn"  [(ngModel)]="selectedCountries">
    <option *ngFor="let country of countries" [ngValue]="country">
        {{country.name}}
    </option>
</select>

theComponent.ts

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

Ich habe ein bisschen mit diesem Problem gekämpft, aber am Ende die folgende Lösung gefunden ... vielleicht hilft es jemandem.

HTML-Vorlage:

<select (change)="onValueChanged($event.target)">
    <option *ngFor="let option of uifOptions" [value]="option.value" [selected]="option == uifSelected ? true : false">{{option.text}}</option>
</select>

Komponente:

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<string> = new EventEmitter<string>();
    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];
    }
}

Vollständige Ausarbeitung anderer Beiträge, hier ist, was in Angular2-Schnellstart funktioniert:

So legen Sie die DOM-Standardeinstellung fest: *ngForVerwenden Sie zusammen mit dem Attribut <option>'s eine bedingte Anweisung selected.

So legen Sie den ControlStandard fest: Verwenden Sie das Konstruktorargument. Andernfalls ist der Steuerwert vor einem Wechsel, wenn der Benutzer eine Option erneut auswählt, die den Wert des Steuerelements mit dem Wertattribut der ausgewählten Option festlegt, null.

Skript:

import {ControlGroup,Control} from '@angular/common';
...
export class MyComponent{
  myForm: ControlGroup;
  myArray: Array<Object> = [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 
  }
}

Markup:

<form [ngFormModel]="myForm" (ngSubmit)="myOnSubmit()">
  <select ngControl="myDropdown">
    <option *ngFor="let eachObj of myArray" selected="eachObj==={{myDefault}}"
            value="{{eachObj}}">{{eachObj.myText}}</option>
  </select>
  <br>
  <button type="submit">Save</button>
</form>

Sie können das [ngModel]anstelle von verwenden [(ngModel)]und es ist in Ordnung

<select class="form-control" **[ngModel]="selectedWorkout"** (ngModelChange)="updateWorkout($event)">
   <option *ngFor="#workout of workouts">{{workout.name}}</option>
</select>

Sie können wie oben vorgehen:

<select class="form-control" 
        [(ngModel)]="selectedWorkout" 
        (ngModelChange)="updateWorkout($event)">
    <option *ngFor="#workout of workouts;
                    let itemIndex = index"
            [attr.selected]="itemIndex == 0">
    {{workout.name}}
    </option>
</select>

Wie Sie im obigen Code sehen können, wird das ausgewählte Attribut der Wiederholungsoption beim Überprüfen des Index der Wiederholungsschleife der Liste festgelegt. [attr. <HTML-Attributname>] wird zum Festlegen des HTML-Attributs in angle2 verwendet.

Ein anderer Ansatz besteht darin, den Modellwert in der Typoskriptdatei wie folgt festzulegen:

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

Fügen Sie der Antwort von @Matthijs hinzu, stellen Sie sicher, dass Ihr selectElement ein nameAttribut hat und namees in Ihrer HTML-Vorlage eindeutig ist. Winkel 2 verwendet den Eingabenamen, um Änderungen zu aktualisieren. Wenn also doppelte Namen vorhanden sind oder dem Eingabeelement kein Name zugeordnet ist, schlägt die Bindung fehl.

Fügen Sie die ausgewählte Bindungseigenschaft hinzu, stellen Sie jedoch sicher, dass sie für andere Felder null ist, z.

<option *ngFor="#workout of workouts" [selected]="workout.name =='back' ? true: null">{{workout.name}}</option>

Jetzt wird es funktionieren

<select class="form-control" name='someting' [ngModel]="selectedWorkout" (ngModelChange)="updateWorkout($event)">
    <option value="{{workout.name}}" *ngFor="#workout of workouts">{{workout.name}}</option>
</select>

Wenn Sie ein Formular verwenden, sollte sich nameinnerhalb des selectTags ein Feld befinden .

Alles, was Sie tun müssen, ist nur valuedas optionTag hinzuzufügen .

selectedWorkout Wert sollte "zurück" sein und fertig.

Wenn Sie die 2-Wege-Bindung über [(ngModel)] nicht möchten, gehen Sie folgendermaßen vor:

<select (change)="selectedAccountName = $event.target.value">
  <option *ngFor="let acct of accountsList" [ngValue]="acct">{{ acct.name }}</option>
</select>

Gerade auf meinem Projekt auf Angular 4 getestet und es funktioniert! Die Kontenliste ist ein Array von Kontoobjekten, in denen der Name eine Eigenschaft des Kontos ist.

Interessante Beobachtung:
[ngValue] = "acct" übt das gleiche Ergebnis aus wie [ngValue] = "acct.name".
Ich weiß nicht, wie Angular 4 das schafft!

Schritt: 1 Eigenschaften erstellen Klasse deklarieren

export class Task {
    title: string;
    priority: Array<any>;
    comment: string;

    constructor() {
        this.title      = '';
        this.priority   = [];
        this.comment    = '';
     }
}

Stamm: 2 Ihre Komponentenklasse

import { Task } from './task';

export class TaskComponent implements OnInit {
  priorityList: Array<any> = [
    { 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
  }
}

Schritt: 3 Zeigen Sie die Datei .html an

<select class="form-control" name="priority" [(ngModel)]="taskModel.priority"  required>
    <option *ngFor="let list of priorityList" [value]="list.value">
      {{list.label}}
    </option>
</select>

Ausgabe:

Für mich definiere ich einige Eigenschaften:

disabledFirstOption = true;

get isIEOrEdge(): boolean {
    return /msie\s|trident\/|edge\//i.test(window.navigator.userAgent)
}

Dann im Konstruktor und ngOnInit

constructor() {
    this.disabledFirstOption = false;
}

ngOnInit() {
    setTimeout(() => {
        this.disabledFirstOption = true;
    });
}

Und in der Vorlage füge ich dies als erste Option innerhalb des Auswahlelements hinzu

<option *ngIf="isIEOrEdge" [value]="undefined" [disabled]="disabledFirstOption" selected></option>

Wenn Sie die erste Option auswählen, können Sie einfach die Verwendung der Eigenschaft disabledFirstOption entfernen

In meinem Fall wird hier der this.selectedtestSubmitResultViewStandardwert basierend auf den Bedingungen festgelegt, und eine Variable testSubmitResultViewmuss ein und dieselbe sein wie testSubmitResultView. Das hat in der Tat bei mir funktioniert

<select class="form-control" name="testSubmitResultView"  [(ngModel)]="selectedtestSubmitResultView" (ngModelChange)="updatetestSubmitResultView($event)">
    <option *ngFor="let testSubmitResultView of testSubmitResultViewArry" [ngValue]="testSubmitResultView" >
        {{testSubmitResultView.testSubmitResultViewName}}
    </option>
</select>

Für mehr Informationen,

testSubmitResultViewArry: Array<any> = [];
selectedtestSubmitResultView: string;
    
getTestSubmitResultViewList() {
    try {
        this.examService.getTestSubmitResultViewDetails().subscribe(response => {
            if (response != null && response !== undefined && response.length > 0) {
                response.forEach(x => {
                    if (x.isDeleted === false) {
                        this.testSubmitResultViewArry.push(x);
                    }
                    if (x.isDefault === true) {
                        this.selectedtestSubmitResultView = x;
                    }
                })
            }
        });
    } catch (ex) {
        console.log('Method: getTestSubmitResultViewList' + ex.message);
    }
}

Ich war zuvor mit diesem Problem konfrontiert und habe es mit verschiedenen einfachen Problemumgehungsmethoden behoben

Für Ihre Component.html

      <select class="form-control" ngValue="op1" (change)="gotit($event.target.value)">

      <option *ngFor="let workout of workouts" value="{{workout.name}}" name="op1" >{{workout.name}}</option>

     </select>

Dann können Sie in Ihrer component.ts die ausgewählte Option anhand von erkennen

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

funktioniert wie unten gezeigt:

<select class="form-control" id="selectTipoDocumento" formControlName="tipoDocumento" [compareWith]="equals"
          [class.is-valid]="this.docForm.controls['tipoDocumento'].valid &&
           (this.docForm.controls['tipoDocumento'].touched ||  this.docForm.controls['tipoDocumento'].dirty)"
          [class.is-invalid]="!this.docForm.controls['tipoDocumento'].valid &&
           (this.docForm.controls['tipoDocumento'].touched ||  this.docForm.controls['tipoDocumento'].dirty)">
            <option value="">Selecione um tipo</option>
            <option *ngFor="let tipo of tiposDocumento" [ngValue]="tipo">{{tipo?.nome}}</option>
          </select>

Sie müssen nur das ngModel und den gewünschten Wert eingeben:

<select id="typeUser" ngModel="Advanced" name="typeUser">
  <option>Basic</option>
  <option>Advanced</option>
  <option>Pro</option>
</select>