Angular 2 - 如何从select/option获取值

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(请注意缺少value属性option):

<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? */

解决这种情况的正确方法是什么？

谢谢你的建议.

Answer 1

正如评论中所讨论的那样,"我希望它如何工作"的例子确实有效:

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

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

Plunker

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

• select:从ngModel(e1e44a9)单独设置值,关闭#7975 #7978

我更喜欢这种方法,因为它不会给组件添加属性,也不需要使用<form>标签(比如@Thierry的答案).