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

正如评论中所讨论的，＆＃34;我喜欢它如何工作＆＃34;示例确实有效：

<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来实现这一目标。有关详细信息，请参阅changelog for beta.15：

选择：从ngModel（e1e44a9）单独设置值，关闭#7975 #7978

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

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>

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

Answer 3

您可以使用change事件调用

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

工作示例https://plnkr.co/edit/dQZgSyw6uc67UNhNDlZv?p=preview

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

3 个答案: