1

我想将角度 2 中的选择的默认选项设置为“选择一个选项”。这是我到目前为止的代码：

HTML

<div class="form-group">
                        <label class="col-md-4 control-label" for="CustomFix">Select an option:</label>
                        <div class="col-md-4">
                            <select id="example" name="example" class="form-control" [(ngModel)]="exampleArray" (ngModelChange)="changes()">
                                <option disabled selected>Select a Custom Fix</option>
                                <option *ngFor="let example of exampleArray" [ngValue]="example">{{example.attribute }}</option>
                            </select>
                        </div>
                    </div>

打字稿

changes(){
console.log(this.example.option);
}

我的 html 中有一行：

<option disabled selected>Select a Custom Fix</option>

如何将其作为默认选项启用？它与我与 ngModel 一起使用的数组是分开的

4

3 回答 3

6

如果你想在开始时选择这个选项——通常是当ngModel' 的值是时undefined，你只需要告诉 Angular 这个选项负责undefined值，所以它应该是：

<option disabled [ngValue]="undefined">Select a Custom Fix</option>

您还需要更正您的[(ngModel)]绑定 - 现在您正在尝试将选定的值绑定到.. 数组本身。您应该绑定到其他一些属性，例如：

<select id="example" name="example" class="form-control" [(ngModel)]="example">

（您可以在这里看到工作解决方案：http: //plnkr.co/edit/Zu29ztqaaDym1GYDAhtJ ?p=preview ）

于 2016-11-16T19:15:33.780 回答
2

您应该给该选项一个值，将选择元素绑定到一个 ID 变量，并在组件加载时设置该变量。

// controller
exampleArraySelectedValue = -1;
<div class="form-group">
  <label class="col-md-4 control-label" for="CustomFix">Select an option:</label>
  <div class="col-md-4">
    <select id="example" name="example" class="form-control" [(ngModel)]="exampleArraySelectedValue" (ngModelChange)="changes()">
      <option value="-1">Select a Custom Fix</option>
      <option *ngFor="let example of exampleArray" [ngValue]="example">{{example.attribute }}</option>
    </select>
  </div>
</div>

于 2016-11-16T19:08:37.723 回答
1

如果使用[ngValue]，则需要将相同的对象实例分配给exampleArray. 另一个具有相同属性和值的对象实例不会这样做。

如果您使用[value]="..."而不是[ngValue]，则只能使用字符串，并且对于包含相同字符的不同字符串实例的字符串比较被认为是相等的，但对于exampleArray需要引用与使用的完全相同的对象引用的对象实例，情况并非如此[ngValue]。

实际上

[(ngModel)]="exampleArray"

在您的示例中是无效的，因为模型不应该是用于生成<option>元素的数组，它应该是保存所选值的属性。

   <div class="form-group">
        <label class="col-md-4 control-label" for="CustomFix">Select an option:</label>
        <div class="col-md-4">
            <select id="example" name="example" class="form-control" [(ngModel)]="selectedItem" (ngModelChange)="changes()">
                <option disabled selected>Select a Custom Fix</option>
                <option *ngFor="let example of exampleArray" [ngValue]="example">{{example.attribute }}</option>
            </select>
        </div>
    </div>

constructor() {
  this.selectedItem = exampleArray[1]; // will make the 2nd element of `exampleArray` the selected item
}
于 2016-11-16T19:27:05.413 回答