Question

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

＆＃13;

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

＆＃13;

编辑：我玩了一点，现在知道问题的来源，但不知道如何修复它。此选择字段位于：

＆＃13;

<form [formGroup]="form">

＆＃13;

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

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>

for Reactive Forms使用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

Answer 2

除非您的组件中定义了item值，否则您不需要[value]绑定。

您可以在此处使用标准html：

<option value="item1">Select</option>
<option value="item2">&lt; 0.5 cm3</option>
<option value="item3">&gt; 0.5 cm3</option>

Angular 2选择不绑定

2 个答案: