blocks|key|4428266|text|将绑定添加到selected属性，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4428267|<option+*ngFor="#workout+of+workouts"+
++++[selected]="workout.name+==+'back'">{{workout.name}}</option>|code-block|syntax|javascript|4428268|entityMap^0|6|8|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>Add a binding to the <code>selected</code> property, like this:</p>

<pre><code>&lt;option *ngFor="#workout of workouts" 
    [selected]="workout.name == 'back'"&gt;{{workout.name}}&lt;/option&gt;
</code></pre>


blocks|key|4428722|text|将此代码添加到选择列表的o位置。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4428723|<option+[ngValue]="undefined"+selected>Select</option>|offset|length|style|CODE|4428724|entityMap^0|0|0|1I|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

<p>Add this Code at o position of the select list.</p>

<p><code>&lt;option [ngValue]="undefined" selected&gt;Select&lt;/option&gt;</code></p>


blocks|key|4428402|text|只需将模型的值设置为所需的默认值，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4428403|selectedWorkout+=+'back'|code-block|syntax|javascript|4428404|我创建了@Douglas的plnkr+here的分支，以演示在angular2中获得所需行为的各种方法。|offset|length|4428405|entityMap|0|LINK|mutability|MUTABLE|url|https://plnkr.co/edit/gmcHr2GLom4ibZf4pWDw^0|0|0|J|4|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>just set the value of the model to the default you want like this:</p>

<pre><code>selectedWorkout = 'back'
</code></pre>

<p>I created a fork of @Douglas' plnkr <a href="https://plnkr.co/edit/gmcHr2GLom4ibZf4pWDw">here</a> to demonstrate the various ways to get the desired behavior in angular2.</p>


blocks|key|4428637|text|你可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4428638|<option+*ngFor="let+workout+of+workouts"+[value]="workout.name">{{workout.name}}</option>|code-block|syntax|javascript|4428639|或者这样：|4428640|++<option+*ngFor="let+workout+of+workouts"+[attr.value]="workout.name"+[attr.selected]="workout.name+==+'leg'+?+true+:+null">{{workout.name}}</option>|4428641|也可以这样设置默认值：|4428642|<option+[value]="null">Please+Select</option>
<option+*ngFor="let+workout+of+workouts"+[value]="workout.name">{{workout.name}}</option>|4428643|或|4428644|<option+[value]="0">Please+Select</option>
<option+*ngFor="let+workout+of+workouts"+[value]="workout.name">{{workout.name}}</option>|4428645|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

<p>You Can approach this way:</p>

<pre><code>&lt;option *ngFor="let workout of workouts" [value]="workout.name"&gt;{{workout.name}}&lt;/option&gt;
</code></pre>

<p>or this way:</p>

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

<p>or you can set default value this way:</p>

<pre><code>&lt;option [value]="null"&gt;Please Select&lt;/option&gt;
&lt;option *ngFor="let workout of workouts" [value]="workout.name"&gt;{{workout.name}}&lt;/option&gt;
</code></pre>

<p>or</p>

<pre><code>&lt;option [value]="0"&gt;Please Select&lt;/option&gt;
&lt;option *ngFor="let workout of workouts" [value]="workout.name"&gt;{{workout.name}}&lt;/option&gt;
</code></pre>


blocks|key|4428466|text|使用index将第一个值显示为默认值|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4428467|<option+*ngFor="let+workout+of+workouts;+#i+=+index"+[selected]="i+==+0">{{workout.name}}</option>|code-block|syntax|javascript|4428468|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Use index to show the first value as default</p>

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


blocks|key|4428974|text|根据https://angular.io/api/forms/SelectControlValueAccessor的说法，你只需要以下几点：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4428975|theView.html：|4428976|<select+[compareWith]="compareFn"++[(ngModel)]="selectedCountries">
++++<option+*ngFor="let+country+of+countries"+[ngValue]="country">
++++++++{{country.name}}
++++</option>
</select>|code-block|syntax|javascript|4428977|theComponent.ts|4428978|import+{+SelectControlValueAccessor+}+from+'@angular/forms';
++++compareFn(c1:+Country,+c2:+Country):+boolean+{
++++return+c1+&&+c2+?+c1.id+===+c2.id+:+c1+===+c2;
}|4428979|entityMap|0|LINK|mutability|MUTABLE|url|https://angular.io/api/forms/SelectControlValueAccessor^0|2|1J|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|13|8|@]|9|@]|C|$I|J]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

<p>According to <a href="https://angular.io/api/forms/SelectControlValueAccessor" rel="noreferrer">https://angular.io/api/forms/SelectControlValueAccessor</a> you
just need the following:</p>

<p>theView.html: </p>

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

<p>theComponent.ts</p>

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


blocks|key|4428893|text|在这一点上有点困难，但最终得到了以下解决方案……也许这会对某人有所帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4428894|HTML模板：|4428895|<select+(change)="onValueChanged($event.target)">
++++<option+*ngFor="let+option+of+uifOptions"+[value]="option.value"+[selected]="option+==+uifSelected+?+true+:+false">{{option.text}}</option>
</select>|code-block|syntax|javascript|4428896|组件：|4428897|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];
++++}
}|4428898|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Struggled a bit with this one, but ended up with the following solution... maybe it will help someone.</p>

<p>HTML template:</p>

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

<p>Component:</p>

<pre><code>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&lt;string&gt; = new EventEmitter&lt;string&gt;();
    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 =&gt; o.value == 
        this.uifSelectedValue)[0];
    }
}
</code></pre>


blocks|key|4428448|text|完全充实了其他帖子，这里是在Angular2快速入门中起作用的内容。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4428449|要设置DOM默认值:与*ngFor一起，在<option>的selected属性中使用条件语句。|offset|length|style|CODE|4428450|要设置Control的默认值:使用它的构造函数参数。否则，在onchange之前，当用户重新选择一个选项时，控件的值将为空。|4428451|脚本：|4428452|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+
++}
}|code-block|syntax|javascript|4428453|标记：|4428454|<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>|4428455|entityMap^0|0|B|6|L|8|U|8|0|3|7|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@$D|Y|E|Z|F|G]|$D|10|E|11|F|G]|$D|12|E|13|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|14|8|@$D|15|E|16|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|17|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|18|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|19|8|@]|9|@]|A|$]]|$1|S|3|T|5|N|7|1A|8|@]|9|@]|A|$O|P]]|$1|U|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|V|$]]

<p>Fully fleshing out other posts, here is what works in Angular2 quickstart, </p>

<p>To set the DOM default: along with <code>*ngFor</code>, use a conditional statement in the <code>&lt;option&gt;</code>'s <code>selected</code> attribute.</p>

<p>To set the <code>Control</code>'s default: use its constructor argument. Otherwise before an onchange when the user re-selects an option, which sets the control's value with the selected option's value attribute, the control value will be null.</p>

<p>script:</p>

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

<p>markup:</p>

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


blocks|key|4428472|text|您可以使用该[ngModel]而不是[(ngModel)]，这是可以的|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4428473|<select+class="form-control"+**[ngModel]="selectedWorkout"**+(ngModelChange)="updateWorkout($event)">
+++<option+*ngFor="#workout+of+workouts">{{workout.name}}</option>
</select>|code-block|syntax|javascript|4428474|entityMap^0|6|9|I|B|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

<p>You can Use that <code>[ngModel]</code> instead of <code>[(ngModel)]</code>and it is Ok</p>

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


blocks|key|4428621|text|您可以按照上面的步骤操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4428622|<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>|code-block|syntax|javascript|4428623|在上面的代码中，您可以看到，重复选项的选定属性是在列表的重复循环的检查索引上设置的。attr.<+html属性名称>用于在angular2中设置html属性。|4428624|另一种方法是将typescript文件中的模型值设置为：|4428625|this.selectedWorkout+=+this.workouts.length+>+0
+++++++++++++++++++++++?+this.workouts[0].name
+++++++++++++++++++++++:+'No+data+found';//'arm'|4428626|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>You can do as above:</p>

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

<p>In above code as you can see, selected attribute of the repeating option is set on checking index of the repeating loop of list. [attr.&lt; html attribute name >] is used for setting html attribute in angular2.</p>

<p>Another approach will be setting model value in typescript file as :</p>

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


blocks|key|4428450|text|添加到@Matthijs的答案中，请确保你的select元素有一个name属性，并且它的name在你的html模板中是唯一的。Angular+2正在使用输入名称来更新更改。因此，如果有重复的名称或没有附加到输入元素的名称，绑定将失败。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4428451|entityMap^0|M|6|X|4|18|4|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

<p>Add on to @Matthijs 's answer, please make sure your <code>select</code> element has a <code>name</code> attribute and its <code>name</code> is unique in your html template. Angular 2 is using input name to update changes. Thus, if there are duplicated names or there is no name attached to input element, the binding will fail. </p>


blocks|key|4428412|text|添加选定的绑定属性，但对于其他字段，请确保将其设为空，例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4428413|<option+*ngFor="#workout+of+workouts"+[selected]="workout.name+=='back'+?+true:+null">{{workout.name}}</option>|code-block|syntax|javascript|4428414|现在它可以工作了|4428415|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Add binding property selected, but make sure to make it null, for other fields e.g:</p>

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

<p>Now it will work</p>


blocks|key|4428667|text|<select+class="form-control"+name='someting'+[ngModel]="selectedWorkout"+(ngModelChange)="updateWorkout($event)">
++++<option+value="{{workout.name}}"+*ngFor="#workout+of+workouts">{{workout.name}}</option>
</select>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4428668|如果你使用的是表单，在select标签中应该有name字段。|unstyled|offset|length|style|CODE|4428669|您所需要做的就是在option标记中添加value。|4428670|selectedWorkout的值应该是"back“，然后就完成了。|4428671|entityMap^0|0|B|6|N|4|0|9|6|K|5|0|0|F|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@$G|S|H|T|I|J]|$G|U|H|V|I|J]]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@$G|X|H|Y|I|J]|$G|Z|H|10|I|J]]|9|@]|A|$]]|$1|M|3|N|5|F|7|11|8|@$G|12|H|13|I|J]]|9|@]|A|$]]|$1|O|3|-4|5|F|7|14|8|@]|9|@]|A|$]]]|P|$]]

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

<p>If you are using form there should be <code>name</code> field inside <code>select</code> tag.</p>

<p>All you need to do is just add <code>value</code> to the <code>option</code> tag.</p>

<p><code>selectedWorkout</code> value should be "back" , and its done.</p>


blocks|key|4428746|text|如果您不希望通过(ngModel)进行双向绑定，请执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4428747|<select+(change)="selectedAccountName+=+$event.target.value">
++<option+*ngFor="let+acct+of+accountsList"+[ngValue]="acct">{{+acct.name+}}</option>
</select>|code-block|syntax|javascript|4428748|刚刚在Angular+4上对我的项目进行了测试，它工作正常！accountsList是Account对象的数组，其中name是Account的属性。|4428749|有趣的观察：|4428750|ngValue="acct“产生与ngValue="acct.name”相同的结果。|4428751|不知道Angular+4是怎么做到的！|4428752|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>If you don't want the 2-way binding via [(ngModel)], do this:</p>

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

<p>Just tested on my project on Angular 4 and it works! The accountsList is an array of Account objects in which name is a property of Account.</p>

<p>Interesting observation:<br>
[ngValue]="acct" exerts the same result as [ngValue]="acct.name".<br>
Don't know how Angular 4 accomplish it!</p>


blocks|key|4428829|text|您只需要将ngModel和您想要选择的值放入：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4428830|<select+id="typeUser"+ngModel="Advanced"+name="typeUser">
++<option>Basic</option>
++<option>Advanced</option>
++<option>Pro</option>
</select>|code-block|syntax|javascript|4428831|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You just need to put the ngModel and the value you want selected:</p>

<pre><code>&lt;select id="typeUser" ngModel="Advanced" name="typeUser"&gt;
  &lt;option&gt;Basic&lt;/option&gt;
  &lt;option&gt;Advanced&lt;/option&gt;
  &lt;option&gt;Pro&lt;/option&gt;
&lt;/select&gt;
</code></pre>


blocks|key|4428860|text|对我来说，我定义了一些属性：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4428861|disabledFirstOption+=+true;

get+isIEOrEdge():+boolean+{
++++return+/msie\s%7Ctrident\/%7Cedge\//i.test(window.navigator.userAgent)
}|code-block|syntax|javascript|4428862|然后在构造函数和ngOnInit中|4428863|constructor()+{
++++this.disabledFirstOption+=+false;
}

ngOnInit()+{
++++setTimeout(()+=>+{
++++++++this.disabledFirstOption+=+true;
++++});
}|4428864|在模板中，我将其添加为select元素中的第一个选项|4428865|<option+*ngIf="isIEOrEdge"+[value]="undefined"+[disabled]="disabledFirstOption"+selected></option>|4428866|如果允许选择第一个选项，则只需删除属性disabledFirstOption的用法|4428867|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>For me, I define some properties:</p>

<pre><code>disabledFirstOption = true;

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

<p>Then in the constructor and ngOnInit</p>

<pre><code>constructor() {
    this.disabledFirstOption = false;
}

ngOnInit() {
    setTimeout(() =&gt; {
        this.disabledFirstOption = true;
    });
}
</code></pre>

<p>And in the template I add this as the first option inside the select element</p>

<pre><code>&lt;option *ngIf="isIEOrEdge" [value]="undefined" [disabled]="disabledFirstOption" selected&gt;&lt;/option&gt;
</code></pre>

<p>If you allow to select the first option you can just remove the usage of the property disabledFirstOption</p>


blocks|key|4428907|text|在我的示例中，根据条件将this.selectedtestSubmitResultView设置为默认值，并且变量testSubmitResultView必须为1且与testSubmitResultView相同。这对我来说确实很有效|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4428908|<select+class="form-control"+name="testSubmitResultView"++[(ngModel)]="selectedtestSubmitResultView"+(ngModelChange)="updatetestSubmitResultView($event)">
++++<option+*ngFor="let+testSubmitResultView+of+testSubmitResultViewArry"+[ngValue]="testSubmitResultView"+>
++++++++{{testSubmitResultView.testSubmitResultViewName}}
++++</option>
</select>|code-block|syntax|javascript|4428909|有关详细信息，请参见|4428910|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'+%2B+ex.message);
++++}
}|4428911|entityMap^0|C|X|1K|K|2A|K|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|P|$]]

<p>In my case, here <code>this.selectedtestSubmitResultView</code> is set with default value based on conditions and an variable <code>testSubmitResultView</code> must be one and same as <code>testSubmitResultView</code>. This indeed worked for me</p>
<pre><code>&lt;select class=&quot;form-control&quot; name=&quot;testSubmitResultView&quot;  [(ngModel)]=&quot;selectedtestSubmitResultView&quot; (ngModelChange)=&quot;updatetestSubmitResultView($event)&quot;&gt;
    &lt;option *ngFor=&quot;let testSubmitResultView of testSubmitResultViewArry&quot; [ngValue]=&quot;testSubmitResultView&quot; &gt;
        {{testSubmitResultView.testSubmitResultViewName}}
    &lt;/option&gt;
&lt;/select&gt;
</code></pre>
<p>For More Information,</p>
<pre><code>testSubmitResultViewArry: Array&lt;any&gt; = [];
selectedtestSubmitResultView: string;
    
getTestSubmitResultViewList() {
    try {
        this.examService.getTestSubmitResultViewDetails().subscribe(response =&gt; {
            if (response != null &amp;&amp; response !== undefined &amp;&amp; response.length &gt; 0) {
                response.forEach(x =&gt; {
                    if (x.isDeleted === false) {
                        this.testSubmitResultViewArry.push(x);
                    }
                    if (x.isDefault === true) {
                        this.selectedtestSubmitResultView = x;
                    }
                })
            }
        });
    } catch (ex) {
        console.log('Method: getTestSubmitResultViewList' + ex.message);
    }
}
</code></pre>


blocks|key|4428932|text|我在使用angular+11的时候也遇到了同样的问题，但最终还是找到了解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4428933|++<option+disabled+selected+value="undefined">Select+an+Option</option>|code-block|syntax|javascript|4428934|​|4428935|使用ngFor完成示例。|4428936|<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>|4428937|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I faced the same problem while using angular 11. But finally found a solution.</p>
<pre class="lang-html prettyprint-override"><code>  &lt;option disabled selected value=&quot;undefined&quot;&gt;Select an Option&lt;/option&gt;
</code></pre>
<br>
<p>complete example with ngFor.</p>
<pre class="lang-html prettyprint-override"><code>&lt;select name=&quot;types&quot; id=&quot;types&quot; [(ngModel)]=&quot;model.type&quot; #type=&quot;ngModel&quot;&gt;
  &lt;option class=&quot;&quot; disabled selected value=&quot;undefined&quot;&gt;Select an Option&lt;/option&gt;
  &lt;option *ngFor=&quot;let item of course_types; let x = index&quot; [ngValue]=&quot;type.id&quot;&gt;
    {{ item.name }} &lt;/option&gt;
&lt;/select&gt;
</code></pre>


blocks|key|4428830|text|我以前遇到过这个问题，我用各种简单的变通方法解决了它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4428831|对于您的Component.html|4428832|++++++<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>|code-block|syntax|javascript|4428833|然后，在您的component.ts中，您可以通过以下方式检测所选选项|4428834|gotit(name:string)+{
//Use+it+from+hare+
console.log(name);
}|4428835|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I faced this Issue before and I fixed it with vary simple workaround way </p>

<p>For your Component.html </p>

<pre><code>      &lt;select class="form-control" ngValue="op1" (change)="gotit($event.target.value)"&gt;

      &lt;option *ngFor="let workout of workouts" value="{{workout.name}}" name="op1" &gt;{{workout.name}}&lt;/option&gt;

     &lt;/select&gt;
</code></pre>

<p>Then in your component.ts you can detect the selected option by </p>

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


blocks|key|4428794|text|效果很好，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4428795|<select+class="form-control"+id="selectTipoDocumento"+formControlName="tipoDocumento"+[compareWith]="equals"
++++++++++[class.is-valid]="this.docForm.controls['tipoDocumento'].valid+&&
+++++++++++(this.docForm.controls['tipoDocumento'].touched+%7C%7C++this.docForm.controls['tipoDocumento'].dirty)"
++++++++++[class.is-invalid]="!this.docForm.controls['tipoDocumento'].valid+&&
+++++++++++(this.docForm.controls['tipoDocumento'].touched+%7C%7C++this.docForm.controls['tipoDocumento'].dirty)">
++++++++++++<option+value="">Selecione+um+tipo</option>
++++++++++++<option+*ngFor="let+tipo+of+tiposDocumento"+[ngValue]="tipo">{{tipo?.nome}}</option>
++++++++++</select>|code-block|syntax|javascript|4428796|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>works great as seen below:</p>

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


<p>In Angular 1 I could select the default option for a drop down box using the following:</p>

<pre><code>&lt;select 
    data-ng-model="carSelection"
    data-ng-options = "x.make for x in cars" data-ng-selected="$first"&gt;
&lt;/select&gt;
</code></pre>

<p>In Angular 2 I have: </p>

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

<p>How could I select a default option given my option data is:</p>

<p><code>[{name: 'arm'}, {name: 'back'}, {name:'leg'}]</code> and my value I to default on on is <code>back</code>?</p>


Angular 2 Dropdown Options Default Value

在Angular 1中，我可以使用以下内容为下拉框选择默认选项：<select     data-ng-model="carSelection"    data-ng-options = "x.make for x in cars" data-ng-selected="$first"></select>在Angular 2中，我有：<select class="form-control" [(ng

问角度2下拉选项默认值
EN

回答 20

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角度2下拉选项默认值EN

回答 20

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角度2下拉选项默认值
EN