[英]Set default select list value Angular2
I want to set the default option for the select in angular 2 as "Select an option". 我想将角度2中的选择设置为“选择选项”。 Here is the code that I have so far: 这是我到目前为止的代码:
HTML 的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>
Typescript 打字稿
changes(){
console.log(this.example.option);
}
I have the line in my html: 我的html中有这一行:
<option disabled selected>Select a Custom Fix</option>
How can I enable this as the default option? 如何启用它作为默认选项? It is separate from my array used with ngModel 它与我与ngModel一起使用的数组分开
If you want to have this option selected at the start - that's usually when the ngModel
's value is undefined
, you just have to tell Angular that this option is responsible for undefined
value, so it should be: 如果您想在一开始就选择此选项-通常是在ngModel
的值undefined
,您只需要告诉Angular该选项负责undefined
值,因此应该是:
<option disabled [ngValue]="undefined">Select a Custom Fix</option>
You also need do correct your [(ngModel)]
binding - right now you're trying to bind selected value to.. the array itself. 您还需要更正[(ngModel)]
绑定-现在您正试图将所选值绑定到数组本身。 You should rather bind to some other property, eg: 您应该绑定到其他属性,例如:
<select id="example" name="example" class="form-control" [(ngModel)]="example">
(You can see the working solution here: http://plnkr.co/edit/Zu29ztqaaDym1GYDAhtJ?p=preview ) (您可以在此处查看有效的解决方案: http : //plnkr.co/edit/Zu29ztqaaDym1GYDAhtJ?p=preview )
You should give that option a value, bind the select element to an ID variable, and set that variable on component load. 您应该给该选项一个值,将select元素绑定到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>
If you use [ngValue]
then you need to assign the identical object instance to exampleArray
. 如果您使用[ngValue]
那么你需要同一个对象实例分配给exampleArray
。 Another object instance with the same properties and values won't do. 具有相同属性和值的另一个对象实例将不起作用。
If you use [value]="..."
instead of [ngValue]
, then only strings can be used and for string comparison to different string instances containing the same characters are considered equal, but that's not the case for object instances where exampleArray
needs to reference the exact same object reference used with [ngValue]
. 如果使用[value]="..."
而不是[ngValue]
,则只能使用字符串,并且与包含相同字符的不同字符串实例进行字符串比较时,它们被认为是相等的,但对于exampleArray
对象实例则不是这种情况需要引用与[ngValue]
一起使用的完全相同的对象引用。
Actually 其实
[(ngModel)]="exampleArray"
in your example is invalid, because the model should not be the array that is used to generate the <option>
elements, it should be a property that holds the selected value. 在您的示例中是无效的,因为模型不应该是用于生成<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
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.