Angular 2 选择不绑定答案

【问题标题】：Angular 2 select does not bindAngular 2 选择不绑定
【发布时间】：2018-02-28 22:30:56
【问题描述】：

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

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

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

&lt;form [formGroup]="form"&gt;

。不知何故，它不喜欢它。一旦我将它移到表单之外 - 它就可以了！但我需要它在表格内。其他字段 - 复选框、输入等以相同的形式工作得非常好...

【问题讨论】：

这部分是响应式表单还是模板驱动表单？
我猜是混合的。
这可能是问题所在 - 我认为您不应该尝试结合这些方法。从您的原始帖子看来，您正在使用 template-driven 表单，您在 html 模板和适当的表单指令中定义表单。可能值得检查该文档，因为我认为如果您尝试将两者结合起来，您最终会遇到问题 - 而且会非常混乱！
啊，我现在看到@alexKhymenko 添加了 cmets，反映了同样的观点 :-)

标签： javascript html angular

【解决方案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>

对于响应式表单，使用 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

【讨论】：

谢谢，Alex，我确实把它改成了 value，但是如果我把它放在 formGroup 里面还是不行...
您尝试将反应式表单与 ngModel 一起使用它不起作用 :-)
你应该选择一个
或使用 formControl 名称代替 ngModel
@user1298416 添加了链接

【解决方案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>

【讨论】：

谢谢，Garth，不过这似乎是另一个问题 - 我更新了我的问题。