简体   繁体   English

选择Angular2的双向绑定

[英]Two-way binding for select Angular2

Angular2, in my ts, I have a control group, how can I have the two-way binding for the select in my html using ngFormControl? Angular2,在我的ts中,我有一个控制组,如何使用ngFormControl对我的html中的select进行双向绑定?

form.component.ts form.component.ts

this._reportGeneratingForm = fb.group({
 ......

  selectedGroup: ['']
})

form.component.html form.component.html

  <select class="form-control" ????>
      <option>Day</option>
      <option>Hour</option>
      <option>week</option>
      <option>Month</option>
    </select>
<select class="form-control" [(ngModel)]="someProperty">
  <option>Day</option>
  <option>Hour</option>
  <option>week</option>
  <option>Month</option>
</select>

where someProperty is a property on the components class that holds the value or 其中someProperty是包含值或的组件类的属性

<select class="form-control" [ngFormControl]="selectControl">
  <option>Day</option>
  <option>Hour</option>
  <option>week</option>
  <option>Month</option>
</select>

This only works properly on all browsers if you have a recent Angular2 version (>= beta.16) 这只适用于所有浏览器,如果您有最新的Angular2版本(> = beta.16)

In this example selected atribute is not working ! 在此示例中,所选属性不起作用! But in ts file 但是在ts文件中

  • For the ngModel : You can write as someProperty = Day 对于ngModel:您可以写为someProperty = Day
  • For the ngFormControl: You can also write as selectControl.value= Day 对于ngFormControl:您也可以写为selectControl.value= Day

It will works fine. 它会正常工作。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM