答案 0 :(得分：38)
<select [(ngModel)]="defaultValue">
<option>AM</option>
<option>PM</option>
</select>
export class MyComponent {
defaultValue = 'PM';
}
通常它就像
一样<select [(ngModel)]="defaultValue">
<option *ngFor="let value of values" [ngValue]="value">{{value}}</option>
</select>
export class MyComponent {
values = ['AM', 'PM'];
defaultValue = this.values[1];
}
提示对于非字符串值，请使用`[ngValue] =“...”
<select [(ngModel)]="defaultValue">
<option [ngValue]="values[0]">AM</option>
<option [ngValue]="values[2]">PM</option>
</select>
答案 1 :(得分：10)
对于模板驱动的表单，我这样做并获得了默认选择。
<select [(ngModel)]="defaultOption" name="identification">
<option [value]=null>Select</option>
<option *ngFor="let option of identification" [value]="option.id"> {{ option.name }} </option>
</select>
并在component.ts文件中，
identification = [
{ id: 1, name: 'Passport'},
{ id: 2, name: 'Adhaar'},
{ id: 3, name: 'Driver\'s license'},
];
defaultOption = null;
在加载时，我们可以选择Select作为默认值。
答案 2 :(得分：7)
我不知道为什么这么长的答案。
简答：
使用[selected] =＆＃34; isSelected＆＃34;在您的选项标签中！
解决方案：
<select>
<option [selected]="isSelected">AM</option>
<option>PM</option>
</select>
来源：
https://medium.com/@phismonster/set-default-value-for-select-in-angular-2-27f0da413935
答案 3 :(得分：3)
在模板文件中：
<select name="AMPMTime" [(ngModel)]="aMPMTime.time" #aMPMTime="ngModel">
<option [ngValue]="0">AM</option>
<option [ngValue]="1">PM</option>
</select>
在Component.ts文件中：
ngOnInit() {
this.aMPMTime.time= 0;
}
并且选择控件将默认选择“ AM”。
答案 4 :(得分：2)
应该有效，试试这个
<select>
<option [selected]='a=="None"'>None</option>
<option [selected]='a=="AM"'>AM</option>
<option [selected]='a=="PM"'>PM</option>
</select>
//in .ts file
a='PM'
如果您使用循环*ngFor生成选项，则此方法更有利，您只需添加[selected]属性并绑定类中的值
PS：这种方法在静态和动态绑定方面都很有效。
答案 5 :(得分：1)
我的NgModel已分配给一个数组，我无法为数组中的每个元素设置默认值。默认情况下，这些值是未定义的，因此您可以使用该值设置默认选项值。
export class MyComponent {
someList:Array<any> = ['apples','banana','oranges'];
myModel: Array<any> = [];
}
<div *ngFor="let list of someList; let i = index;">
<select [(ngModel)]="myModel[i]" class="form-control">
<option [value]="undefined">DEFAULT</option>
<option [value]="'a'">A</option>
<option [value]="'b'">B</option>
</select>
</div>
答案 6 :(得分：1)
/** All includes */
@Component({
selector: 'app-select',
template: `
<form [formGroup]="select_form">
<select *ngFor="let item of select_options"
formControlName="select_control">
<option value=="-1">Select one option ... </option>
<option value="{{item.id}}">{{item.text}}</option>
</select>
<button type="button" (click)="setActive("-1")"></button>
</form>
`
})
export class SelectComponent extends OnInit{
private select_form: FormGroup;
select_options: any[] =
[{id: 1, text: "Text 1", id: 2, text: "Text 2"}];
constructor(private builder: FormBuilder){
}
ngOnInit(){
this.init();
}
init(){
this.select_form= this.builder.group({
select_control: new FormControl("1", [/** Validation */])
});
}
setActive(active_value: string){
this.select_form.get('select_control').patchValue(active_value);
}
}
答案 7 :(得分：1)
<select [(ngModel)]="selectedValue">
<option value="selectOptions" disabled="disabled">---Select Options---</option>
<option *ngFor="let somevalue of somevalues" [value]="somevalue">{{somevalue}}</option>
</select>
export class MyComponent {
ngOnInit() {
somevalues= ['abc', 'def','ghi'];
selectedValue= "selectOptions";
}
someFunction() {
// process selected option
var selection = selectedValue;
:
:
//reset selectedValue to "--Select Options--"
selectedValue = "selectOptions";
}
}
答案 8 :(得分：1)
这种方式：
<select [(ngModel)]="Value">
<option disabled selected value="">AM</option>
<option >PM</option>
</select>
答案 9 :(得分：1)
<select>
<option [ngValue]="null">All</option>
<option *ngFor="let oneItem of items" [ngValue]="oneItem.id">
{{oneItem.description}}
</option>
</select>
只需在列表中添加选项。这在Angular 4中对我有用。
答案 10 :(得分：1)
我注意到没有人提供非ngModel解决方案，这是
html：
<select (change)="valueSelected($event.target.value)">
<option *ngFor="let option of options">{{option}}</option>
</select>
打字稿：
valueSelected(value:string) {
console.log(value);
}
答案 11 :(得分：0)
options = [
{
name : 'Option A',
value : 1
},
{
name : 'Option B',
value : 2
},
{
name : 'Option C',
value : 3
}
];
placeHolder = 'select option';
<div>
<label>Label:</label>
<select>
<option [value]="null" ngValue="null" hidden>{{placeHolder}}</option>
<option *ngFor="let option of options"
[ngValue]="option.value">{{option.name]}}
</option>
</select>
</div>
答案 12 :(得分：0)
<select class="form-control" [(ngModel)]="someList.key" name="key" #key="ngModel" required>
<option value="undefined" selected disabled>Select option</option>
<option *ngFor="let data of someList" value="{{data.key}}">{{data.key}</option>
</select>
答案 13 :(得分：0)
该解决方案对我有帮助。组件 .html 代码：
<div class="modal-body">
<select class="form-control" [(ngModel)]="selectedUser">
<option [ngValue]="undefined" disabled selected>Choose notification admin</option>
<option [ngValue]="user" *ngFor="let user of candidatesToNotificationAdmins | async">
{{user.name}}
</option>
</select>
</div>
组件 .ts 代码：
this.selectedUser = undefined;
答案 14 :(得分：0)
以下是首选方式 html 看起来像这样
<select [(ngModel)]="defaultValue">
<option *ngFor="let value of values" [ngValue]="value">{{value}}</option>
</select>
组件看起来像这样
export class MyComponent {
values = ['AM', 'PM'];
defaultValue = this.values[0];
}
答案 15 :(得分：-9)
如果您不想动态执行任何操作，旧的纯HTML方式只适用于Angular2：
<select>
<option selected>AM</option>
<option>PM</option>
</select>
但以下是Angular 2方式，它允许您动态分配选定的值，这可能是实际和常见的用例:(您需要导入FormsModule）
<select [(ngModel)]='selectedValue'>
<option value='AM'>AM</option>
<option value='PM'>PM</option>
</select>
并在您的组件类
中selectedValue = 'AM'; // You may assign 'AM or 'PM' dynamically here
以下链接可能有用：
https://angular.io/api/forms/NgSelectOption
https://angular.io/api/forms/NgModel
上面提到的Angular 2方法是模板驱动形式方法。还有另一种做同样的方法，即下面描述的反应形式方法:(你需要导入ReactiveFormsModule）
<select [formControl]='control'>
<option>AM</option>
<option>PM</option>
</select>
并在您的组件类
中control = new FormControl('AM');
以下链接可能有用：