javascript - Angular 2选择不绑定(bind)

Question

我玩了很长一段时间，选择列表显示正常，但我无法让它显示所选值 - 它是空的。我做错了什么？

  <div class="form-group">
    <label for="ai_total_volume_select">Select Volume Range:</label>
    <select class="form-control" [(ngModel)]="selectedValue" name="items" id="ai_total_volume_select">
      <option [value]="item1">Select</option>
      <option [value]="item2">&lt; 0.5 cm3</option>
      <option [value]="item3">&gt; 0.5 cm3</option>
    </select>
  </div>
  <label>AAA</label>
  <div>{{selectedValue}}</div>

编辑:我玩了更多，现在知道问题出在哪里，但不知道如何解决它。此选择字段位于:

<form [formGroup]="form">

。但不知怎的，它不喜欢它。一旦我将它移到表单之外 - 它就起作用了!但我需要它在表格内。其他字段 - 复选框、输入等以相同的形式完美地工作......

Answer 1

您传递空对象的值有点困惑。添加“”，它将可以创建 plunker 。

<select class="form-control" [(ngModel)]="selectedValue" name="items" id="ai_total_volume_select">
  <option [value]="'item1'">Select</option>
  <option [value]="'item2'">&lt; 0.5 cm3</option>
  <option [value]="'item3'">&gt; 0.5 cm3</option>
</select>

或使用不带[]的值

<form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>

 <select class="form-control" [(ngModel)]="selectedValue" name="items" id="ai_total_volume_select">
  <option value="item1">Select</option>
  <option value="item2">&lt; 0.5 cm3</option>
  <option value="item3">&gt; 0.5 cm3</option>
 </select>
</form>

对于响应式(Reactive)表单，请使用 FormControlName

 <form [formGroup]="form">
   <select class="form-control" formControlName="selectedValue" name="items" id="ai_total_volume_select">
  <option value="item1">Select</option>
  <option value="item2">&lt; 0.5 cm3</option>
  <option value="item3">&gt; 0.5 cm3</option>
  </select>
<form>

{{form.controls.get('selectedValue').value}}

为了更好地理解模板语法，请阅读此 article

ngForm和 Reactive Forms