为什么在 <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 选项。

<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 在您的选择中获取正确的选项。