首页 文章

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

提问于
浏览 次
4

使用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 添加到标签中 . 我'm not binding to anything in the component class as this control is only used to provide it'的值是同一模板中的另一个控件 .

问题：

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

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

angular

2 回答

  • 3

    如果您不希望进行双向绑定，可以将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

    回复于
  • 3

    使用ngModel时，状态在内部处理，对它的任何显式更改都会被忽略 . 在您的示例中，您正在设置选项的selected属性，但您还为选择提供了（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';
  }
    回复于

相关问题