javascript - 角度下拉菜单不显示默认值

Question

selected使用常规的 html 选择菜单，如果您使用和属性创建选项元素disabled并提供该选项文本，则默认情况下该文本将显示在选择菜单中。这是基本的html：

<select name="myname">
  <option selected disabled>Select one...</option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>  

这是页面的样子：

但是在下面的隔离代码中，我证明了 Angular 不显示选项文本是侵入性的：

https://github.com/lovefamilychildrenhappiness/DropDownNoShowDefaultValue

// app.component.html
<h1>Select Box does not show default value: </h1>
<app-select-box
  [options]="collection"
></app-select-box>

// select-box.component.html
<select 
    [value]="value" 
    [disabled]="disabled">
    <option selected disabled value="">Select one...</option>
    <option *ngFor="let option of options">{{option}}</option>
</select>

是什么导致 Angular 破坏了选择框的原生 html 行为？

标签： javascripthtmlangular

Answer 1

只需将要选择的选项放在首位。

<option value="0">value to be selected<option>
<option value="1">next<option>
<option value="2">Continues<option>