Question

在Angular 1中，我可以使用以下选项为下拉框选择默认选项：

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

在Angular 2中我有：

[{name: 'arm'}, {name: 'back'}, {name:'leg'}]

如果我的选项数据是：

，我如何选择默认选项

back我默认打开的值是{{1}}？

Answer 1

向selected属性添加绑定，如下所示：

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

Answer 2

如果您将默认值分配给selectedWorkout并使用[ngValue]（允许将对象用作值 - 否则只支持字符串），那么它应该只是执行您想要的操作：

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

确保您分配给selectedWorkout的值与workouts中使用的值相同。即使具有相同属性和值的另一个对象实例也不会被识别。仅检查对象标识。

<强>更新

Angular添加了对compareWith的支持，这使得在使用[ngValue]时更容易设置默认值（对象值）

来自文档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;
}

这样可以将不同的（新）对象实例设置为默认值，并使用compareFn来确定它们是否应该被视为相等（例如，如果id属性相同。

Answer 3

只需将模型的值设置为您想要的默认值：

selectedWorkout = 'back'

我创建了@ Douglas＆＃39; plnkr here演示了在angular2中获得所需行为的各种方法。

Answer 4

将此代码添加到选择列表的o位置。

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

Answer 5

你可以这样做

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

或者这样

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

或者你可以通过这种方式设置deafult vlaue

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

或

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

Answer 6

使用index将第一个值显示为默认值

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

Answer 7

根据https://angular.io/api/forms/SelectControlValueAccessor你只需要以下内容：

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

Answer 8

在这个问题上有点挣扎，但最终得到了以下解决方案......也许它会帮助别人。

HTML模板：

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

组件：

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

Answer 9

你可以这样做：

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

在上面的代码中，您可以看到，重复选项的所选属性是在检查列表重复循环的索引时设置的。 [ATTR＆LT; html属性名称＆gt;]用于在angular2中设置html属性。

另一种方法是将typescript文件中的模型值设置为：

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

Answer 10

您可以使用[(ngModel)]而不是<select class="form-control" **[ngModel]="selectedWorkout"** (ngModelChange)="updateWorkout($event)"> <option *ngFor="#workout of workouts">{{workout.name}}</option> </select>，这是好的

Answer 11

完全充实其他帖子，这是Angular2快速入门中的作用，

要设置DOM默认值：以及*ngFor，请在<option>的{{1}}属性中使用条件语句。

设置selected的默认值：使用其构造函数参数。否则在onchange之前，当用户重新选择一个选项时，该选项使用所选选项的value属性设置控件的值，控件值将为null。

脚本：

Control

标记：

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

Answer 12

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

如果您使用的是表单，name标记内应该有select字段。

您只需将value添加到option代码即可。

selectedWorkout值应“返回”，并完成。

Answer 13

添加到@Matthijs的答案，请确保您的select元素具有name属性，并且其name在您的html模板中是唯一的。 Angular 2使用输入名称来更新更改。因此，如果存在重复的名称或者输入元素没有附加名称，则绑定将失败。

Answer 14

添加选定的绑定属性，但请确保将其设为null，对于其他字段，例如：

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

现在它会起作用

Answer 15

如果您不希望通过[（ngModel）]进行双向绑定，请执行以下操作：

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

刚刚在我的Angular 4项目上测试过它的确有效！ accountsList是一个Account对象数组，其中name是Account的属性。

有趣的观察：
[ngValue] =“acct”与[ngValue] =“acct.name”的结果相同。
不知道Angular 4是如何实现它的！

Answer 16

步骤：1创建属性声明类

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

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

词根：2您的组件类

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

步骤：3查看文件.html

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

<强>输出：

Answer 17

效果很好，如下所示：

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

Answer 18

对我来说，我定义了一些属性：

disabledFirstOption = true;

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

然后在构造函数中添加ngOnInit

constructor() {
    this.disabledFirstOption = false;
}

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

然后在模板中，将其添加为select元素内的第一个选项

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

如果允许选择第一个选项，则只需删除属性disableFirstOption的用法即可

Answer 19

就我而言，这里的this.selectedtestSubmitResultView会根据条件设置为默认值，并且变量testSubmitResultView必须是一个且与testSubmitResultView相同。这确实对我有用

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

有关更多信息，

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

Answer 20

我在使用 angular 11 时遇到了同样的问题。但最终找到了解决方案。

  <option disabled selected value="undefined">Select an Option</option>

ngFor 的完整示例。

<select name="types" id="types" [(ngModel)]="model.type" #type="ngModel">
  <option class="" disabled selected value="undefined">Select an Option</option>
  <option *ngFor="let item of course_types; let x = index" [ngValue]="type.id">
    {{ item.name }} </option>
</select>

Answer 21

之前我遇到过这个问题，我用不同的简单解决方法修复了它

适用于您的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>

然后在您的component.ts中，您可以通过

检测所选选项

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

Answer 22

您只需要放入ngModel和要选择的值即可：

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

Angular 2下拉选项默认值

22 个答案: