如果我只是这样使用:
<div style="text-align:center">
<form>
<select
type="checkbox"
name="vehicle1"
(change)="onchange()"
>
<option>
1
</option>
<option>
2
</option>
</select>
</form>
</div>
进展顺利,选择将默认选择第一个选项。但是如果我这样做:
<div style="text-align:center">
<form>
<select
type="checkbox"
name="vehicle1"
[(ngModel)]="selectValue"
(change)="onchange()"
>
<option [ngValue]="1">
1
</option>
<option [ngValue]="2">
2
</option>
</select>
</form>
</div>
export class AppComponent {
title = "CodeSandbox";
public selectValue = "1";
constructor() {}
onchange() {
console.log("onchange");
console.log(this.selectValue);
}
}
添加ngmodel和ngValue,默认情况下,select标记将显示为空。
我知道有一种添加此行以显示下拉标题的方法:
<option [ngValue]="'none'" disabled>Select SortType</option>
但是我不想要,我希望它默认显示第一个选项。 有没有办法做到这一点?
答案 0 :(得分:1)
在使用[ngValue]
时,您将其设置为number
而不是string
的类型
将其更改为[ngValue]="'1'"
或更改public selectValue = 1;