typescript Angular 2 - 当默认值是硬编码时,在下拉列表中设置默认值
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/41622586/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 2 - setting default value in dropdown when default is hard coded
提问by Jhorra
I have the following dropdown. I want to set All Patients as the default value.
我有以下下拉列表。我想将所有患者设置为默认值。
<select [(ngModel)]="searchModel.careprovider">
<option [value]="0">All Pateints</option>
<option *ngFor="let user of practiceUsers" [value]="user._id.$oid">
{{user.dn}}
</option>
</select>
My model is declared this way:
我的模型是这样声明的:
searchModel: any = { location: null, practice: null, name: '', careProvider: 0 };
I set the practiceUsers this way:
我以这种方式设置了practiceUsers:
this._practice.getUsers(this.searchModel.practice).subscribe(result => {
this.practiceUsers = result;
this.searchModel.careProvider = 0;
});
No matter how I change it I always just get a blank option as the default. I've tried adding an object to the this.practiceUsers
array after it is loaded, then setting the model value. I've tried setting the model value with and without quotes to see if a number or string made a difference. Everything I try still results in the default being the blank option.
无论我如何更改它,我总是得到一个空白选项作为默认值。我尝试this.practiceUsers
在加载后向数组添加一个对象,然后设置模型值。我尝试设置带引号和不带引号的模型值,以查看数字或字符串是否有所不同。我尝试的一切仍然导致默认为空白选项。
In Angular 1 I would have used ng-options
, but that is no longer available for Angular 2, and every example I find shows to use the ngFor
for dropdowns.
在 Angular 1 中,我会使用ng-options
,但在 Angular 2 中不再可用,我发现的每个示例都显示使用ngFor
for 下拉列表。
采纳答案by Stefan Svrkota
Object attributes are case sensitive, in your object, attribute is called careProvider
, but in your template, you are using searchModel.careprovider
with lowercase p
. I think you also have to use NgValue
directive instead of value
because you are using NgModel
directive. So, this should work: it is not working
对象属性区分大小写,在您的对象中,属性被称为careProvider
,但在您的模板中,您使用的searchModel.careprovider
是小写p
。我认为您还必须使用NgValue
指令而不是value
因为您正在使用NgModel
指令。所以,这应该有效:它不起作用
<select [(ngModel)]="searchModel.careProvider">
<option [ngValue]="0">All Pateints</option>
<option *ngFor="let user of practiceUsers" [ngValue]="user._id.$oid">
{{user.dn}}
</option>
</select>
回答by Jaroslaw K.
Try to use [selected] attribute. I solved similar problem this way:
尝试使用 [selected] 属性。我这样解决了类似的问题:
<select>
<option *ngFor="let option of options" value="{{option.id}}" [selected]="option === selectedOption">
{{option.name}}
</option>
</select>
I hope this helps a little
希望这会有帮助
回答by Michalis
<select class="form-control" id="policeid_country_id" name="policeid_country_id" formControlName="policeid_country_id">
<option [ngValue]="null">Select</option>
<option [ngValue]="country.id" *ngFor="let country of countries">{{country.country}}</option>
</select>