Açısal 2 Açılır Menü Seçenekleri Varsayılan Değer

Angular 1'de, aşağıdakileri kullanarak bir açılır kutu için varsayılan seçeneği seçebilirim:

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

Angular 2'de şunlara sahibim:

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

Seçenek verilerim şöyleyse varsayılan bir seçeneği nasıl seçebilirim:

[{name: 'arm'}, {name: 'back'}, {name:'leg'}]ve varsayılan değerim back?

selectedMülke aşağıdaki gibi bir bağlama ekleyin :

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

Varsayılan değeri atar selectedWorkoutve kullanırsanız [ngValue](nesnelerin değer olarak kullanılmasına izin verir - aksi takdirde yalnızca dizge desteklenir), o zaman yalnızca istediğinizi yapmalıdır:

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

Atadığınız değerin selectedWorkout, kullanılanla aynı örnek olduğundan emin olun workouts. Aynı özelliklere ve değerlere sahip başka bir nesne örneği bile tanınmaz. Yalnızca nesne kimliği kontrol edilir.

Güncelleme

Kullanıldığında compareWithvarsayılan değeri ayarlamayı kolaylaştıran için açısal ek destek [ngValue](nesne değerleri için)

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

Bu şekilde, farklı (yeni) bir nesne örneği, varsayılan değer olarak ayarlanabilir ve compareFnbunların eşit olarak kabul edilip edilmeyeceğini anlamak için kullanılır (örneğin, idözellik aynıysa).

modelin değerini şu şekilde istediğiniz varsayılana ayarlayın:

selectedWorkout = 'back'

Açısal2'de istenen davranışı elde etmenin çeşitli yollarını göstermek için burada bir @Douglas 'plnkr çatalı oluşturdum .

Bu Kodu seçilen listenin o konumuna ekleyin.

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

Bu şekilde yaklaşabilirsiniz:

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

veya bu şekilde:

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

veya varsayılan değeri şu şekilde ayarlayabilirsiniz:

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

veya

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

İlk değeri varsayılan olarak göstermek için dizini kullanın

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

Https://angular.io/api/forms/SelectControlValueAccessor'a göre sadece şunlara ihtiyacınız var:

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

Bununla biraz uğraştım, ancak aşağıdaki çözümle sonuçlandı ... belki birine yardımcı olur.

HTML şablonu:

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

Bileşen:

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

Diğer gönderileri tam olarak detaylandırarak, işte Angular2 hızlı başlangıçta işe yarayan şey,

DOM varsayılanını ayarlamak için: bununla birlikte *ngFor, <option>'s selectedözelliğinde bir koşullu ifade kullanın .

ControlVarsayılanını ayarlamak için : yapıcı bağımsız değişkenini kullanın. Aksi takdirde, kullanıcı, kontrolün değerini seçilen seçeneğin değer özniteliğiyle ayarlayan bir seçeneği yeniden seçtiğinde, bir değişimden önce, kontrol değeri boş olacaktır.

senaryo:

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

biçimlendirme:

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

Bunun [ngModel]yerine kullanabilirsiniz [(ngModel)]ve sorun değil

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

Yukarıdaki gibi yapabilirsiniz:

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

Yukarıdaki kodda, görebileceğiniz gibi, yinelenen seçeneğin seçilen özniteliği, yinelenen döngü döngüsünün kontrol indeksinde ayarlanır. [öznitelik <html öznitelik adı>], angular2'de html özniteliğini ayarlamak için kullanılır.

Diğer bir yaklaşım, typecript dosyasında model değerini şu şekilde ayarlamak olacaktır:

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

@Matthijs'in yanıtına ekleyin, lütfen öğenizin selectbir nameözelliğe sahip olduğundan ve namehtml şablonunuzda benzersiz olduğundan emin olun . Angular 2, değişiklikleri güncellemek için giriş adını kullanıyor. Bu nedenle, yinelenen adlar varsa veya giriş öğesine hiçbir ad eklenmemişse, bağlama başarısız olur.

Seçili bağlama özelliğini ekleyin, ancak diğer alanlar için, örneğin:

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

Şimdi işe yarayacak

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

Form kullanıyorsanız, içinde namealan olmalıdırselect etiketin .

Yapmanız gereken tek şey sadece eklemek edilir valueiçinoption etiketi.

selectedWorkout değer "geri" olmalı ve tamamlanmıştır.

[(NgModel)] aracılığıyla 2 yönlü bağlamayı istemiyorsanız, şunu yapın:

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

Angular 4'teki projem üzerinde test ettim ve işe yarıyor! AccountList, adın bir Account özelliği olduğu bir Account nesneleri dizisidir.

İlginç gözlem:
[ngValue] = "acct", [ngValue] = "acct.name" ile aynı sonucu verir.
Angular 4'ün bunu nasıl başardığını bilmiyorum!

Adım: 1 Özellikler bildirim sınıfı oluşturun

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

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

Stem: 2 Bileşen Sınıfınız

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

Adım: 3 Dosyayı .html görüntüleyin

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

Çıktı:

Benim için bazı özellikleri tanımlıyorum:

disabledFirstOption = true;

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

Ardından yapıcıda ve ngOnInit'te

constructor() {
    this.disabledFirstOption = false;
}

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

Ve şablonda bunu select öğesinin içine ilk seçenek olarak ekliyorum

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

İlk seçeneği seçmenize izin verirseniz, disabledFirstOption özelliğinin kullanımını kaldırabilirsiniz.

Benim durumumda, burada this.selectedtestSubmitResultViewkoşullara göre varsayılan değer ile ayarlanır ve bir değişken testSubmitResultViewtek ve aynı olmalıdır testSubmitResultView. Bu gerçekten benim için çalıştı

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

Daha fazla bilgi için,

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

Bu Sorunla daha önce karşılaştım ve bunu çeşitli basit geçici çözüm yollarıyla düzelttim

Component.html dosyanız için

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

Daha sonra component.ts içinde, seçilen seçeneği şu şekilde algılayabilirsiniz:

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

aşağıda görüldüğü gibi harika çalışıyor:

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

Sadece ngModel'i ve seçilmesini istediğiniz değeri koymanız yeterlidir:

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