Angular 2 Dropdown Options Nilai Default

Di Angular 1 saya dapat memilih opsi default untuk kotak drop-down menggunakan yang berikut:

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

Di Angular 2 saya punya:

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

Bagaimana saya bisa memilih opsi default mengingat data opsi saya adalah:

[{name: 'arm'}, {name: 'back'}, {name:'leg'}]dan nilai saya sebagai default adalah back?

Tambahkan pengikatan ke selectedproperti, seperti ini:

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

Jika Anda menetapkan nilai default ke selectedWorkoutdan menggunakan [ngValue](yang memungkinkan untuk menggunakan objek sebagai nilai - jika tidak, hanya string yang didukung) maka itu harus melakukan apa yang Anda inginkan:

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

Pastikan nilai yang Anda tetapkan selectedWorkoutadalah nilai yang sama dengan yang digunakan di workouts. Contoh objek lain bahkan dengan properti dan nilai yang sama tidak akan dikenali. Hanya identitas objek yang diperiksa.

memperbarui

Angular menambahkan dukungan untuk compareWith, yang membuatnya lebih mudah untuk mengatur nilai default saat [ngValue]digunakan (untuk nilai obyek)

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

Dengan cara ini, instance objek (baru) yang berbeda dapat disetel sebagai nilai default dan compareFndigunakan untuk mengetahui apakah keduanya harus dianggap sama (misalnya jika idpropertinya sama.

cukup atur nilai model ke default yang Anda inginkan seperti ini:

selectedWorkout = 'back'

Saya membuat garpu @Douglas 'plnkr di sini untuk mendemonstrasikan berbagai cara untuk mendapatkan perilaku yang diinginkan dalam angular2.

Tambahkan Kode ini pada posisi o dari daftar pilih.

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

Anda bisa mendekati dengan cara ini:

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

atau begini:

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

atau Anda dapat menyetel nilai default dengan cara ini:

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

atau

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

Gunakan indeks untuk menampilkan nilai pertama sebagai default

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

Menurut https://angular.io/api/forms/SelectControlValueAccessor, Anda hanya perlu yang berikut ini:

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

Sedikit berjuang dengan yang satu ini, tetapi berakhir dengan solusi berikut ... mungkin itu akan membantu seseorang.

Template HTML:

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

Komponen:

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

Sepenuhnya menyempurnakan posting lain, inilah yang berfungsi di quickstart Angular2,

Untuk menyetel default DOM: bersama dengan *ngFor, gunakan pernyataan kondisional <option>di selectedatribut 's .

Untuk menyetel Controldefault: gunakan argumen konstruktornya. Jika tidak, sebelum onchange ketika pengguna memilih kembali sebuah opsi, yang menetapkan nilai kontrol dengan atribut nilai opsi yang dipilih, nilai kontrol akan menjadi null.

naskah:

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>

Anda dapat Menggunakannya [ngModel]sebagai pengganti [(ngModel)]dan itu Ok

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

Anda dapat melakukan seperti di atas:

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

Dalam kode di atas seperti yang Anda lihat, atribut yang dipilih dari opsi berulang diatur pada pemeriksaan indeks dari daftar pengulangan berulang. [attr. <html attribute name>] digunakan untuk menyetel atribut html di angular2.

Pendekatan lain akan menetapkan nilai model dalam file skrip sebagai:

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

Tambahkan pada jawaban @Matthijs, pastikan selectelemen Anda memiliki nameatribut dan nameunik di template html Anda. Angular 2 menggunakan nama input untuk memperbarui perubahan. Jadi, jika ada nama duplikat atau tidak ada nama yang dilampirkan ke elemen masukan, pengikatan akan gagal.

Tambahkan properti penjilidan yang dipilih, tetapi pastikan untuk membuatnya null, untuk bidang lain misalnya:

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

Sekarang ini akan berhasil

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

Jika Anda menggunakan formulir, harus ada namebidang di dalam selecttag.

Yang perlu Anda lakukan hanyalah menambahkan valueke optiontag.

selectedWorkout nilai harus "kembali", dan selesai.

Jika Anda tidak ingin pengikatan 2 arah melalui [(ngModel)], lakukan ini:

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

Baru saja menguji proyek saya di Angular 4 dan berhasil! AccountsList adalah larik objek Akun yang namanya merupakan properti Akun.

Pengamatan yang menarik:
[ngValue] = "acct" memberikan hasil yang sama dengan [ngValue] = "acct.name".
Tidak tahu bagaimana Angular 4 melakukannya!

Langkah: 1 Buat Properti mendeklarasikan kelas

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

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

Batang: 2 Kelas Komponen Anda

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

Langkah: 3 Lihat File .html

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

Keluaran:

Bagi saya, saya mendefinisikan beberapa properti:

disabledFirstOption = true;

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

Kemudian di konstruktor dan ngOnInit

constructor() {
    this.disabledFirstOption = false;
}

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

Dan di template saya menambahkan ini sebagai opsi pertama di dalam elemen pilih

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

Jika Anda mengizinkan untuk memilih opsi pertama Anda bisa menghapus penggunaan properti disabledFirstOption

Dalam kasus saya, di sini this.selectedtestSubmitResultViewdiatur dengan nilai default berdasarkan kondisi dan variabel testSubmitResultViewharus satu dan sama seperti testSubmitResultView. Ini memang berhasil untuk saya

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

Untuk informasi lebih lanjut,

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

Saya menghadapi Masalah ini sebelumnya dan saya memperbaikinya dengan berbagai cara penyelesaian sederhana

Untuk Component.html Anda

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

Kemudian di component.ts Anda, Anda dapat mendeteksi opsi yang dipilih dengan

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

bekerja dengan baik seperti yang terlihat di bawah ini:

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

Anda hanya perlu meletakkan ngModel dan nilai yang ingin Anda pilih:

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