[英]Angular 2 - how to get value from select / option
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? */
解决这种情况的正确方法是什么?
谢谢你的建议。
正如评论中所讨论的那样,“我希望它如何工作”的例子确实有效:
<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的更改日志 :
我更喜欢这种方法,因为它不会给组件添加属性,也不需要使用<form>
标签(比如@Thierry的答案)。
您可以使用与ngControl
指令内联定义的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。
你可以使用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.