Angular 4中如何设置下拉框的选中项

Question

有关此问题有几个不同的答案，但它们都没有真正回答问题。所以再次：

在我的情况下，按值设置下拉选择的默认值不起作用。为什么？这是来自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>

它并没有选择任何东西。可用的选项包括:

• trueaaa
• falsebbb
• falseccc

但静态 true：

<option ... [selected]="true">...</option>

选择最后一个值（全部为真）。并且使用私有变量boolvar = true，将其用于[selected] = "boolvar"

我不明白“opt”对象和类变量之间的区别。

- Gregor Sklorz

---

尝试......[selected]="opt.selected?true:false"> - Vikhyath Maiya

嗨，Gregor，请尝试使用[selected]="opt.selected == true"，这对我很有效。 - Viijay ijardar

天啊！它成功了！:D 感谢……可惜我仍然不理解发生了什么。 - Gregor Sklorz

Answer 1

如果你想基于真/假选择一个值，请使用

[selected]="opt.selected == true"

例如：

<option *ngFor="let opt of question.options" 
    [value]="opt.key" 
    [selected]="opt.selected == true">
        {{opt.selected+opt.value}} 
</option>

看这个：

Angular 2 - 在下拉列表中设置选定的值

- Viijay ijardar

---

好的...这对我来说可行。 即使它很脏。只要我不理解引擎盖下发生了什么，这对我来说就是最好的解决方案。谢谢。 - Gregor Sklorz

Answer 2

这是我的例子：

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

在组件中，您必须从选择框中获取值：

contactMethods = [
    { id: 1, label: "Email" },
    { id: 2, label: "Phone" }
]

所以，如果你想要选择一个默认值（很可能你想要这个）：

contact = {
    firstName: "CFR",
    comment: "No comment",
    subscribe: true,
    contactMethod: 2 // this id you'll send and get from backend
}

- Carnaru Valentin

Answer 3

如果要将某个值设为默认值，在表单构建器中给它赋一个值：

this.myForm = this.FB.group({
    mySelect: [this.options[0].key, [/* Validators here */]]
});

现在在您的HTML中：

<form [formGroup]="myForm">
    <select [formControlName]="mySelect">
        <option *ngFor="let opt of options" [value]="opt.key">ANY TEXT YOU WANT HERE</option>
    </select>
</form>

我的代码的作用是给你的选择框设定一个值，这个值等于你选项列表的第一个值。这就是在Angular中设置默认选项的方法，selected属性是无用的。

- user4676340

Answer 4

为了在表单初始化时预选一个选项，必须将选择元素的值设置为你正在迭代并设置选项值的数组中的元素属性，这是本例中的关键属性。从你的示例中可以看出。

<select [id]="question.key" [formControlName]="question.key">
  <option *ngFor="let opt of question.options" [value]="opt.key"</option>
</select>

你正在迭代“选项”以创建select选择列表。因此，select的值必须设置为options中某个项目的key属性（在初始化时要显示的那个）。这将显示与您为select设置的值匹配的选项作为默认选项。

您可以通过在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)
}

- Devesh Pradhan

---

当我有一个<select multiple>元素时，如何处理预选值？ - Kim Kakan Andersson

Answer 5

从选项标签中删除[selected]：

<option *ngFor="let opt of question.options" [value]="opt.key">
  {{opt.selected+opt.value}}
</option>

在您的表单构建器中添加：

key: this.question.options.filter(val => val.selected === true).map(data => data.key)

- porgo

Answer 6

让我们以选择控件为例：
绑定到：$scope.cboPais，
源代码：$scope.geoPaises

HTML

<select 
  ng-model="cboPais"  
  ng-options="item.strPais for item in geoPaises"
  ></select>

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();
  }
}

- Fernando Arbe Revoredo

---

这看起来像是 Angular 1.x。 - Kieran