Почему атрибут, выбранный в <select><option>, не работает с ngModel?

Question

У меня проблема с Angular 6: если я использую компонент, основанный на элементе <select> (поле со списком), если я использую его классическим способом, все работает (обратите внимание, что я использовал атрибут selected: результат состоит в том, что в шаблоне параметр по умолчанию уже отображается как выбранный, как я и ожидал!):

<select data-width="200px" title="title" name = "name"
>
  <option value='default' selected>Default</option>
  <option value='1'>Value 1</option>
  <option value='2'>Value 2</option>
</select>

Проблема заключается вчто если я использую директиву [(ngModel)] (мне нужно обязательно получить значение, введенное в поле со списком), по какой-то причине выбранный атрибут больше не работает, и поле со списком появляется с пустым значением как selected option.

<select data-width="200px" title="title" name = "name"
        [(ngModel)] = "value"
>
  <option value='default' selected>Default</option>
  <option value='1'>Value 1</option>
  <option value='2'>Value 2</option>
</select>

Это, конечно, не то поведение, которое я бы хотел выбрать по умолчанию, сохраняя директиву ngModel.Как я могу решить эту проблему?

Answer 1

потому что Angular не полагается на selected для проверки значения.

ngModel привязать ваш элемент HTML к фактическому значению: если вы хотите выбрать значение по умолчанию, ваш ngModel должен быть равен этому значению.

Итак, в вашем компоненте у вас должно быть

value = 'default'; // or '1' or '2'

, чтобы Angular выбирал правильную опцию в вашем выборе.