Angular 2 - 如何从选择/选项中获取价值

Question

Angular 2 的大多数选择/选项解决方案以我们返回实际内容的方式工作，而不是 value 属性。但是，由于我仍在学习 Angular 2，因此我想在单击按钮时获得实际的 value 属性。我设法在某种程度上解决了这个问题，但我不确定这是否是正确的方法。以下是我希望它如何工作的示例：

 <select #selectedCategory>
    <option *ngFor="#category of categories" [value]="category.id">{{category.name}}</option>
</select>

<button (click)="getValueFromSelect(selectedCategory.value)">

/* This returns the selected category.name, not the value attribute. */

上面的解决方案创建了以下 HTML（注意 — 上缺少 option value 属性）：

 <select _ngcontent-oom-3="">
  <!--template bindings={}-->
  <option _ngcontent-oom-3="">stuff 1</option>
  <option _ngcontent-oom-3="">stuff 2</option>
  <option _ngcontent-oom-3="">stuff 3</option>
</select>

下面的解决方案实际上有效，但是，我需要一个 ngModel 才能使其正常工作。

 <select [(ngModel)]="selectedCategory">
    <option *ngFor="#category of categories" [value]="category.id">{{category.name}}</option>
</select>
<button (click)="getValueFromSelect(selectedCategory.value)">
/* This returns the value attribute correctly; however, do I really need a ngModel for one value? */

处理这种情况的正确方法是什么？

谢谢你的建议。

原文由 uglycode 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

正如评论中所讨论的，“我希望它如何工作”示例确实有效：

 <select #selectedCategory>
   <option *ngFor="#category of categories" [value]="category.id">
     {{category.name}}
   </option>
</select>

<button (click)="getValueFromSelect(selectedCategory.value)">click me</button>

笨蛋

但是，我们必须使用 beta.15 才能工作。有关详细信息，请参阅 beta.15 的 更改日志：

• 选择：从 ngModel ( e1e44a9 ) 单独设置值，关闭 #7975 #7978

---

我更喜欢这种方法，因为它不会向组件添加属性，我们也不需要使用 <form> 标记（如@Thierry 的回答）。

原文由 Mark Rajcok 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以使用与 ngControl 指令内联定义的控件：

 <form>
  <select #categoriesCtrl="ngForm" ngControl="categoriesCtrl">
    <option *ngFor="#category of categories" [value]="category.id">
      {{category.name}}
    </option>
  </select>
  <button (click)="getValueFromSelect(categoriesCtrl.value)">
</form>

请参阅此插件： https ://plnkr.co/edit/uWUS9RaGJ34PiXTJ1kPd?p=preview。

原文由 Thierry Templier 发布，翻译遵循 CC BY-SA 3.0 许可协议