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

但静态是真的：

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

选择最后一个值（全部为真）。它还适用于私有变量boolvar = true并在[selected]="boolvar"

中使用它

我不明白＆＃34; opt＆＃34;对象和类变量??

Answer 1

如果要根据真/假使用选择值

[selected] =＆＃34; opt.selected == true＆＃34;

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

检查

Angular 2 - Setting selected value on dropdown list

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>

在组件中，您必须从select：

获取值

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

所以，如果你想让select选择一个默认值（并且你想要那个）：

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

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>

我的代码所做的是为您的select值提供一个值，该值等于选项列表的第一个值。这是您在Angular中选择默认选项的方法，选择是无用的。

Answer 4

从选项标签中删除[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)

Answer 5

要在初始化表单时预选择一个选项，必须将select元素的值设置为要迭代的数组的element属性，并将option的值设置为。在这种情况下，这是关键属性。

从您的示例开始。

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

您正在遍历“选项”以创建选择选项。因此，必须将select的值设置为options中的一项的关键属性（要在初始化时显示的项）。这将显示默认的select作为选项，其值与您为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)
}

Answer 6

让我们看一下使用Select控件的示例
绑定到：$ 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();
  }
}

下拉

6 个答案: