如何在angular2的表单元素中获取下拉列表选定值

Question

下面我的代码有一种输入很少的形式。我想在提交时获取所有值。能够使用 ngModel 获取所有元素值。如何获得选择选项的选定值。

 <form #f="ngForm" (ngSubmit) = "saveData(f)">
  <fieldset>
   <legend>Your Details:</legend>
   <label>Name: <input type="text" name="name" size="30" maxlength="100" [(ngModel)] = "name"></label><br />
   <label>Email: <input type="email" name="email" size="30" maxlength="100" [(ngModel)] = "email"></label><br />
   <label>Password: <input type="password" name="password" size="30" maxlength="100" [(ngModel)] = "password"></label><br />
   <select>
     <option *ngFor = "let combo of combos" value={{combo}}>{{combo}}
     </option>
   </select>
 <input type="submit" value="Save"/>
</fieldset><br />
</form>

Answer 1

我觉得应该是[value]="combo"

<select #selCombo>
  <option *ngFor = "let combo of combos" [value]="combo">{{combo}}
  </option>
</select>

然后在 HTML 端获取选中的值（如果你不想写在组件中）

<div>{{selCombo.value}}</div>

Answer 2

问题在于没有设置 name 属性。

<select [(ngModel)]="gender" name="gender">
   <option *ngFor = "let combo of combos" [value]=combo>{{combo}}
   </option>
</select>

Answer 3

使用 [(ngModel)] 将所选值与变量 OR Model 绑定如下：

<select [(ngModel)]="model.combo">
 <option *ngFor = "let combo of combos" value={{combo}}>{{combo}}
 </option>
</select>

或

let comboValue : any;

<select [(ngModel)]="comboValue">
 <option *ngFor = "let combo of combos" value={{combo}}>{{combo}}
 </option>
</select>