Question

使用Angular 4，我有一个html模板，我想要一个有两个选项的选择框。默认情况下，应预先选择其中一个选项。

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

详细信息：

我指定#rate="ngModel"，以便我可以在条件语句中或插值{{rate.value}}中引用模板中其他位置的值。为了实现这一点，我只需将ngModel添加到标记即可。我没有绑定到组件类中的任何内容，因为此控件仅用于将其值提供给同一模板中的另一个控件。

问题：

在Chrome和Microsoft Edge中，该框为空，未选择默认值。如果我摆脱#rate="ngModel" ngModel它就行了。但是，我需要引用rate.value。

我尝试了各种ngValue，value，[ngValue]，[value]的组合，但我没有尝试将值绑定到模型而我没有使用ngFor循环。选择框上没有其他样式。

Answer 1

使用ngModel时，状态在内部处理，对它的任何显式更改都会被忽略。在您的示例中，您要设置选项的选定属性，但您还为选择提供了（void）ngModel，因此Angular期望在ngModel中提供 select 的状态。

简而言之，您应该利用 ngModel 而不是设置选择的属性：

<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”值，并使用模板局部变量获取所选值：

echo $PATH

DEMO

选定属性不起作用的角度选择选项

详细信息：

问题：

2 个答案: