Javascript 下拉菜单中的 Angular 4 设置选择选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46000950/
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 4 setting selected option in Dropdown
提问by Gregor Sklorz
several questions about this and diffrent answeres. But none of them realy answeres the question. So again:
关于这个和不同答案的几个问题。但他们都没有真正回答这个问题。再说一遍：
Setting default of a Dropdown select by value isnt working in my case. why? This is from the dynamic Form tutorial of Angular 4:
在我的情况下，按值设置下拉选择的默认值不起作用。为什么？这是来自Angular 4的动态表单教程：
<select [id]="question.key" [formControlName]="question.key">
<option *ngFor="let opt of question.options" [value]="opt.key" [selected]="opt.selected">{{opt.selected+opt.value}}</option>
</select>
It doesnt select anything. Available options are:
它不选择任何东西。可用选项有：
- trueaaa
- falsebbb
- falseccc
- 真啊啊
- 假bbb
- 假冒伪劣
But static true:
但静态真实：
<option ... [selected]="true">...</option>
selects the last value (all true).
It also works with a private variable boolvar = trueand using it in [selected]="boolvar"
选择最后一个值（全部为真）。它也适用于私有变量boolvar = true并在[selected]="boolvar"
I dont understand the difference between the "opt" object and the class variable??
我不明白“opt”对象和类变量之间的区别？？
采纳答案by Vijay ijardar
If you want to select a value based on true / false use
如果要根据真/假选择值，请使用
[selected]="opt.selected == true"
[selected]="opt.selected == true"
<option *ngFor="let opt of question.options" [value]="opt.key" [selected]="opt.selected == true">{{opt.selected+opt.value}}</option>
checkit out
一探究竟
回答by Carnaru Valentin
Here is my example:
这是我的例子：
<div class="form-group">
<label for="contactMethod">Contact method</label>
<select
name="contactMethod"
id="contactMethod"
class="form-control"
[(ngModel)]="contact.contactMethod">
<option *ngFor="let method of contactMethods" [value]="method.id">{{ method.label }}</option>
</select>
</div>
And in component you must get values from select:
在组件中，您必须从 select 中获取值：
contactMethods = [
{ id: 1, label: "Email" },
{ id: 2, label: "Phone" }
]
So, if you want select to have a default value selected (and proabbly you want that):
因此，如果您希望 select 选择一个默认值（并且可能是您想要的）：
contact = {
firstName: "CFR",
comment: "No comment",
subscribe: true,
contactMethod: 2 // this id you'll send and get from backend
}
回答by Carnaru Valentin
If you want to select a value as default, in your form builder give it a value :
如果要选择一个值作为默认值，请在表单构建器中为其指定一个值：
this.myForm = this.FB.group({
mySelect: [this.options[0].key, [/* Validators here */]]
});
Now in your HTML :
现在在你的 HTML 中：
<form [formGroup]="myForm">
<select [formControlName]="mySelect">
<option *ngFor="let opt of options" [value]="opt.key">ANY TEXT YOU WANT HERE</option>
</select>
</form>
What my code does is giving your select a value, that is equal to the first value of your options list. This is how you select an option as default in Angular, selected is useless.
我的代码所做的是为您的选择提供一个值，该值等于您的选项列表的第一个值。这就是您在 Angular 中选择一个选项作为默认选项的方式，selected 是无用的。
回答by porgo
Remove [selected] from option tag:
从选项标签中删除 [selected]：
<option *ngFor="let opt of question.options" [value]="opt.key">
{{opt.selected+opt.value}}
</option>
And in your form builder add:
并在您的表单构建器中添加：
key: this.question.options.filter(val => val.selected === true).map(data => data.key)
回答by Devesh Pradhan
To preselect an option when the form is initialized, the value of the select element must be set to an element attribute of the array you are iterating over and setting the value of option to. Which is the key attribute in this case.
要在表单初始化时预选一个选项，必须将 select 元素的值设置为您正在迭代的数组的元素属性，并将选项的值设置为。在这种情况下，这是关键属性。
From your example.
从你的例子。
<select [id]="question.key" [formControlName]="question.key">
<option *ngFor="let opt of question.options" [value]="opt.key"</option>
</select>
You are iterating over 'options' to create the select options. So the value of select must be set to the key attribute of an item in options(the one you want to display on initialization). This will display the default of select as the option whose value matches the value you set for select.
您正在迭代“选项”以创建选择选项。因此，select 的值必须设置为选项中项目的键属性（您希望在初始化时显示的项目）。这将显示 select 的默认值作为其值与您为 select 设置的值匹配的选项。
You can achieve this by setting the value of the select element in the onInit method like so.
您可以通过像这样在 onInit 方法中设置 select 元素的值来实现这一点。
ngOnInit(): void{
myForm : new FormGroup({
...
question.key : new FormControl(null)
})
//Get desired initial value to display on <select>
desiredValue = question.options.find( opt => opt === initialValue)
this.myForm.get(question.key).setValue(desiredValue.key)
}
回答by Fernando Arbe Revoredo
Lets see an example with Select control
binded to: $scope.cboPais,
source: $scope.geoPaises
让我们看一个 Select 控件
绑定到的示例
：$scope.cboPais，
来源：$scope.geoPaises
HTML
HTML
<select
ng-model="cboPais"
ng-options="item.strPais for item in geoPaises"
></select>
JavaScript
JavaScript
$http.get(strUrl2).success(function (response) {
if (response.length > 0) {
$scope.geoPaises = response; //Data source
nIndex = indexOfUnsortedArray(response, 'iPais', default_values.iPais); //array index of default value, using a custom function to search
if (nIndex >= 0) {
$scope.cboPais = response[nIndex]; //if index of array was found
} else {
$scope.cboPais = response[0]; //select the first element of array
}
$scope.geo_getDepartamentos();
}
}
