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

Question

对于常规的html选择菜单，如果您创建具有selected和disabled属性的option元素并提供该选项文本，则默认情况下该文本将显示在select菜单中。这是基本的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行为？

Answer 1

只需将要选择的选项放在第一位即可。

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

Answer 2

这是因为您选择的value绑定到一个变量value，该变量最初未定义。根据html，没有option的值为undefined，因此没有任何选择。您的Select one...选项的字符串值为空。因此，要解决此问题，请将组件中的value初始化为空字符串。

value: string = '';