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


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>


<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下拉选项默认值
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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