Question

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

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的数组分开

Answer 1

如果您想在开始时选择此选项 - 通常在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）

Answer 2

您应该为该选项赋值，将select元素绑定到ID变量，并在组件加载时设置该变量。

＆＃13;

// controller
exampleArraySelectedValue = -1;

＆＃13;

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

＆＃13;

Answer 3

如果您使用[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
}

设置默认选择列表值Angular2

3 个答案: