Angular В раскрывающемся меню не отображается значение по умолчанию

Question

С обычными html меню выбора, если вы создаете элемент опции с атрибутами selected и disabled и даете текст этой опции, тогда этот текст будет отображаться в меню выбора по умолчанию. Вот основы c 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

Это потому, что ваш выбор value связан с переменной с именем value, которая изначально не определена. Согласно html, нет option со значением undefined, поэтому ничего не выбирается. Ваша опция Select one... имеет пустое строковое значение. Чтобы это исправить, инициализируйте value в вашем компоненте пустой строкой.

value: string = '';

Answer 2

просто поставьте опцию для выбора на первое место.

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