Javascript 角度2-如何从选择/选项获取值

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

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

下面的解决方案实际上是可行的，但是，我需要一个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? */

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

---

感谢您的建议。

您可以使用与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>

请参阅以下内容：。

您可以使用更改事件调用执行此操作

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

---

工作示例

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

<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单独设置值，关闭

---

我更喜欢这种方法，因为它不向组件添加属性，也不需要使用@Thierry的答案中的标签。

您能解释一下ngControl的具体功能吗，因为它的文档记录非常糟糕？是的，同意；-控件用于访问表单元素的值、更新时得到通知、应用同步或异步验证。有两种方法可以定义它们：与ngControl内联或通过ngFormControl/FormBuilder编程。有关详细信息，请参阅本文：。我使用了内联的，因为在您的情况下，您只需要获取值，这样对组件类没有影响……请注意，此解决方案需要一个元素。您的“我希望它如何工作”示例不起作用：。它返回分配给选定选项的value属性的category.id。我喜欢这种方法，因为它不向组件添加属性。这真的很奇怪，在我的示例中，当我检查select/option元素时，我没有value属性。我基本上复制/粘贴了你的例子-在你的plunker中，如果你检查元素，每个选项都有一个value属性，而我的没有。我将用生成的HTML更新我的原始问题。您使用的是什么版本的Angular beta？您是否加载了其他库？我的包中有这个。json:\u id:angular2@2.0.0-beta.14，行为与beta.14明显不同。请参阅-选择列表中有一些内容。如果选择标记中有多个选项标记，该怎么办？

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

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