具有选定属性的角度选择选项不起作用答案

【问题标题】：Angular select option with selected attribute not working具有选定属性的角度选择选项不起作用
【发布时间】：2018-03-25 22:09:29
【问题描述】：

使用 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 循环。选择框上也没有其他样式。

【问题讨论】：

不只是
@Vega，它不是双向绑定，因此在这种情况下不应使用 [()] 语法。我相信。
这不起作用，我需要模板变量#rate="ngModel"，以便我可以在模板表单的其他地方引用它。我也不想调用一个事件。我已经编辑了帖子的详细信息，希望能更好地描述用例。
这看起来像是我想要完成的，它确实从选择的选项开始。但是，在尝试该链接并在我的代码中尝试之后，我注意到 {{rate.value}} 没有更新。
这很正常，因为没有双向绑定，但它已更新。检查更新的演示

标签： angular html-select angular2-ngmodel

【解决方案1】：

以上答案不完整，完整答案为here

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

<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}}

【讨论】：

【解决方案2】：

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

<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 5 管道的文档将其显示为 [(ngModel)]='rate' 如果我动态填充选项以及随之而来的所有内容，它将起作用。但是只有两个或三个硬编码选项才有效。从概念上讲，它是如此简单。这是如此基本和简单的事情，我对复杂的建议/修复感到惊讶。
小心，如果您使用反应式表单，现在 v7 已弃用此功能：angular.io/api/forms/FormControlName#use-with-ngmodel
@rynop，不，即使在以前的版本中，最好不要混合响应式表单和 ngModel。但是 OP 无论如何都不使用它，我的例子也是 :)

【解决方案3】：

当您使用 ngModel 时，状态是在内部处理的，对其进行的任何显式更改都会被忽略。在您的示例中，您正在设置 option 的 selected 属性，但您还为您的 select 提供了一个 (void) ngModel，因此 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';
  }

【讨论】：

什么是日志（率）？这只是自定义函数的一个例子吗？请注意，我没有绑定到组件类中的任何变量，并且选择框只是在那里，以便用户可以选择一个值，以便我可以在模板的其他地方的逻辑中使用该值。
不，这只是我为了测试目的而添加的一行，我忘记删除了。我复制粘贴错了
无论如何，您都需要在组件中绑定一个引用才能预选一个值。这就是 ngModel 的工作原理