Angular select 选项 selected 属性无效

Question

使用 Angular 4，我有一个 html 模板，我想要一个带有两个选项的 selection box。默认情况下，应预 select 设置其中一个选项。

<select name="rate" #rate="ngModel" ngModel required>
    <option selected value="hr">hr</option>
    <option value="yr">yr</option>
</select>

详情：

我分配 #rate="ngModel" 以便我可以在模板中的其他位置、条件语句或插值 {{rate.value}} 中引用该值。为此，我只需将 ngModel 添加到标签中即可。我没有绑定到组件 class 中的任何内容，因为此控件仅用于向同一模板中的另一个控件提供它的值。

问题：

在Chrome和Microsoft Edge中，框为空，没有默认值selected。如果我摆脱 #rate="ngModel" ngModel 它会起作用。但是，我需要参考 rate.value.

我尝试了 ngValue、value、[ngValue]、[value] 的各种组合，但我没有尝试将值绑定到模型，也没有使用 ngFor 循环。 select 框也没有进一步的样式。

Answer 1

当您使用 ngModel 时，状态是在内部处理的，任何应用于属性的显式更改都将被忽略。在您的示例中，您正在设置 selected 属性 of option，但您还提供了一个 (void ) ngModel 到你的 select，所以 Angular 期望 select 的状态在ngModel.

简而言之，您应该利用 ngModel 而不是设置 selected 属性:

<select 
    name="rate" 
    #rate="ngModel" 
    [(ngModel)]="yourModelName" 
    required
>
    <option value="hr">hr</option>
    <option value="yr">yr</option>
</select>

并且：

  yourModelName: string;
  constructor() {
    this.yourModelName = 'hr';
  }

Answer 2

如果您不希望有双向绑定，您可以将 ngModel 设置为 'default' 值并使用模板局部变量获取所选值：

<select #rate ngModel="hr">
    <option selected value="hr">hr</option>
    <option value="yr">yr</option>
</select>

<p *ngIf="rate.value == 'hr'">hr</p> 
<p *ngIf="rate.value == 'yr'">yr</p>

{{rate.value}}

DEMO

Angular select 选项 selected 属性无效

Angular select option with selected attribute not working

html-select

angular2-ngmodel

angular

详情：

问题：