选定属性无效的角度选择选项

Question

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

<select name=“rate”#rate=“ngModel”ngModel required><选项选择值=“hr”>hr<期权价值=“yr”>年</option></选择>

细节：

我分配#rate=“ngModel”这样我就可以在模板中的其他地方、在条件语句中或通过插值引用该值{{rate.value}}。为了实现这一点，我只需添加ng型号到标签。我没有绑定到组件类中的任何内容，因为此控件仅用于向同一模板中的另一个控件提供其值。

问题：

在Chrome和Microsoft Edge中，该框为空，未选择默认值。如果我摆脱#rate=“ngModel”ngModel它起作用了。然而，我需要参考费率.价值.

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

Answer 1

当您使用ng型号，状态在内部处理，应用于属性的任何显式更改都将被忽略。在您的示例中，您正在设置挑选出来的的属性选项，但您也在为您的选择，因此Angular期望选择在ngModel中提供。

简单地说，你应该利用ng型号而不是设置挑选出来的属性：

<选择name=“费率”#rate=“ngModel”[（ngModel）]=“您的模型名称”必修的><选项值=“hr”>hr<期权价值=“yr”>年</option></选择>

以及：

yourModelName:string；构造函数（）{this.yourModelName=“hr”；}

Answer 2

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

<select#rate ngModel=“hr”><选项选择值=“hr”>hr<期权价值=“yr”>年</option></选择><p*ngIf=“rate.value==‘hr’”>小时<p*ngIf=“rate.value=='yr'”>年</p>{{rate.value}}

演示

Answer 3

如果您使用的是反应式表单，那么在定义表单模型时设置默认值也会有所帮助。