Tùy chọn thả xuống góc 2 Giá trị mặc định

Trong Angular 1 tôi có thể chọn tùy chọn mặc định cho hộp thả xuống bằng cách sử dụng như sau:

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

Trong Angular 2 tôi có:

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

Làm cách nào tôi có thể chọn một tùy chọn mặc định cho dữ liệu tùy chọn của mình là:

[{name: 'arm'}, {name: 'back'}, {name:'leg'}]và giá trị của tôi tôi mặc định trên là back?

Thêm một ràng buộc vào selectedtài sản, như thế này:

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

Nếu bạn gán giá trị mặc định cho selectedWorkoutvà sử dụng [ngValue](cho phép sử dụng các đối tượng làm giá trị - nếu không thì chỉ hỗ trợ chuỗi), nó sẽ chỉ làm những gì bạn muốn:

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

Đảm bảo rằng giá trị bạn gán selectedWorkoutlà cùng thể hiện với giá trị được sử dụng trong workouts. Một đối tượng khác ngay cả với các thuộc tính và giá trị tương tự sẽ không được công nhận. Chỉ có danh tính đối tượng được kiểm tra.

cập nhật

Hỗ trợ thêm góc compareWith, giúp dễ dàng đặt giá trị mặc định khi [ngValue]được sử dụng (đối với giá trị đối tượng)

Từ các tài liệu 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;
}

Bằng cách này, một thể hiện đối tượng (mới) khác có thể được đặt làm giá trị mặc định và compareFnđược sử dụng để tìm hiểu xem chúng có nên được coi là bằng nhau hay không (ví dụ nếu thuộc idtính giống nhau.

chỉ cần đặt giá trị của mô hình thành mặc định bạn muốn như thế này:

selectedWorkout = 'back'

Tôi đã tạo ra một nhánh của plnkr của @Doureb ở đây để chứng minh các cách khác nhau để có được hành vi mong muốn trong angular2.

Thêm mã này vào vị trí o của danh sách chọn.

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

Bạn có thể tiếp cận theo cách này:

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

hoặc theo cách này:

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

hoặc bạn có thể đặt giá trị mặc định theo cách này:

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

hoặc là

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

Sử dụng chỉ mục để hiển thị giá trị đầu tiên làm mặc định

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

Theo https://angular.io/api/forms/SelectControlValueAccessor bạn chỉ cần như sau:

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

Cố gắng một chút với cái này, nhưng cuối cùng lại có giải pháp sau đây ... có lẽ nó sẽ giúp được ai đó.

Mẫu HTML:

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

Thành phần:

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

Hoàn toàn làm sáng tỏ các bài viết khác, đây là những gì hoạt động trong phần khởi động nhanh Angular2,

Để thiết lập mặc định DOM: cùng với *ngFor, sử dụng một câu lệnh điều kiện trong <option>'s selectedthuộc tính.

Để đặt Controlmặc định: sử dụng đối số hàm tạo của nó. Mặt khác trước khi trao đổi khi người dùng chọn lại một tùy chọn, đặt giá trị của điều khiển với thuộc tính giá trị của tùy chọn đã chọn, giá trị điều khiển sẽ là null.

kịch bản:

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

đánh dấu:

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

Bạn có thể sử dụng nó [ngModel]thay vì [(ngModel)]và nó là Ok

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

Bạn có thể làm như trên:

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

Trong đoạn mã trên như bạn có thể thấy, thuộc tính được chọn của tùy chọn lặp được đặt trên kiểm tra chỉ mục của vòng lặp lặp của danh sách. [attr. <tên thuộc tính html>] được sử dụng để đặt thuộc tính html trong angular2.

Một cách tiếp cận khác sẽ là thiết lập giá trị mô hình trong tệp bản thảo như:

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

Thêm vào câu trả lời của @Matthijs, vui lòng đảm bảo rằng selectphần tử của bạn có namethuộc tính và nó namelà duy nhất trong mẫu html của bạn. Angular 2 đang sử dụng tên đầu vào để cập nhật thay đổi. Do đó, nếu có các tên trùng lặp hoặc không có tên gắn liền với phần tử đầu vào, liên kết sẽ thất bại.

Thêm thuộc tính ràng buộc được chọn, nhưng đảm bảo làm cho nó không có giá trị, cho các trường khác, ví dụ:

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

Bây giờ nó sẽ làm việc

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

Nếu bạn đang sử dụng biểu mẫu, nên có nametrường bên trong selectthẻ.

Tất cả bạn cần làm chỉ là thêm valuevào optionthẻ.

selectedWorkout giá trị phải là "trở lại", và nó đã được thực hiện.

Nếu bạn không muốn ràng buộc 2 chiều thông qua [(ngModel)], hãy làm điều này:

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

Chỉ cần thử nghiệm trên dự án của tôi trên Angular 4 và nó hoạt động! Danh sách tài khoản là một mảng các đối tượng Tài khoản trong đó tên là thuộc tính của Tài khoản.

Quan sát thú vị:
[ngValue] = "acct" sẽ cho kết quả tương tự như [ngValue] = "acct.name".
Không biết làm thế nào Angular 4 hoàn thành nó!

Bước: 1 Tạo lớp khai báo thuộc tính

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

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

Thân: 2 Lớp thành phần của bạn

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

Bước: 3 Xem tệp .html

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

Đầu ra:

Đối với tôi, tôi xác định một số thuộc tính:

disabledFirstOption = true;

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

Sau đó, trong hàm tạo và ngOnInit

constructor() {
    this.disabledFirstOption = false;
}

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

Và trong mẫu tôi thêm cái này làm tùy chọn đầu tiên bên trong phần tử select

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

Nếu bạn cho phép chọn tùy chọn đầu tiên, bạn chỉ có thể xóa việc sử dụng thuộc tính bị vô hiệu hóaFirstOption

Trong trường hợp của tôi, ở đây this.selectedtestSubmitResultViewđược đặt với giá trị mặc định dựa trên các điều kiện và một biến testSubmitResultViewphải là một và giống như testSubmitResultView. Điều này thực sự làm việc cho tôi

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

Để biết thêm thông tin,

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

Tôi đã đối mặt với Vấn đề này trước đây và tôi đã khắc phục nó bằng nhiều cách giải quyết đơn giản khác nhau

Đối với Thành phần của bạn.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>

Sau đó, trong thành phần của bạn, bạn có thể phát hiện tùy chọn đã chọn bằng cách

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

hoạt động tuyệt vời như được thấy dưới đây:

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

Bạn chỉ cần đặt ngModel và giá trị bạn muốn chọn:

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