问题描述
我的下拉菜单中有两项.我需要将初始值设置为下面代码数组中的第一个值
I have two items in dropdown. I need to set initial value as first value from array below is my code
objects = ['production', 'development'];
this.object = this.objects[0];
<div class="item">
<select formControlName="db" class="form-control" (change)="changeDb($event)" [ngModel]="object">
<option *ngFor="let object of objects" [ngValue]="object">{{object}}</option>
</select>
</div>
该值不是使用上面的代码设置的.它在ng反射模型中显示,但不在UI中显示
The value is not setting using above code.It is showing in ng reflect model but not in UI
推荐答案
您可以像下面这样使用ngModel绑定来完全实现此目的:
You can cleanly achieve this by using the ngModel binding like so:
component.ts
component.ts
export class AppComponent {
objects = ['production', 'development'];
// The selected node of the objects array
selected = this.objects[1];
}
component.html
component.html
<div class="item">
<select class="form-control" (change)="changeDb($event)" [ngModel]="selected">
<option *ngFor="let object of objects">{{object}}</option>
</select>
</div>
上面的代码将预先选择对象数组的开发"节点.
The above code as it is would preselect the 'development' node of the objects array.
因此,要预先选择第一个选项,您将进行更改:
So in your case to preselect the first option, you would change:
selected = this.objects[1];
收件人:
selected = this.objects[0];
Stackblitz示例: https://stackblitz.com/edit/angular-esulus
Example Stackblitz: https://stackblitz.com/edit/angular-esulus
这篇关于如何在angular8的下拉菜单中设置初始值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!