Javascript Angular 2 - 如何从选择/选项中获取价值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36771389/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 2 - how to get value from select / option
提问by uglycode
The majority of select / option solutions for Angular 2 work in a way that we return the actual content, not the valueattribute. However, since I'm still learning Angular 2, I want to get the actual valueattribute on clicking a button. I managed to somewhat solve this issue, but I'm not sure if this is the correct approach.
Below is the example of how I'd like it to work:
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. */
The solution above creates the following HTML (note the lack of valueattribute on option):
上面的解决方案创建了以下 HTML（注意缺少valueon 属性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>
The solution below actually works, however, I need an ngModelin order to make it work.
下面的解决方案实际上有效，但是，我需要一个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? */
What is the correct way to approach this situation?
处理这种情况的正确方法是什么？
Thank you for your suggestions.
谢谢你的建议。
回答by Mark Rajcok
As discussed in the comments, the "how I'd like it to work" example does work:
正如评论中所讨论的，“我希望它如何工作”示例确实有效：
<select #selectedCategory>
<option *ngFor="#category of categories" [value]="category.id">
{{category.name}}
</option>
</select>
<button (click)="getValueFromSelect(selectedCategory.value)">click me</button>
However, we must use beta.15 for this to work. See the changelogfor beta.15 for more info:
但是，我们必须使用 beta.15 才能使其工作。有关更多信息，请参阅beta.15的更新日志：
I prefer this approach since it does not add a property to the component, nor do we need to use a <form>tag (like in @Thierry's answer).
我更喜欢这种方法，因为它不会向组件添加属性，我们也不需要使用<form>标签（如@Thierry 的回答）。
回答by Thierry Templier
You could use a control defined inline with the ngControldirective:
您可以使用与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>
See this plunkr: https://plnkr.co/edit/uWUS9RaGJ34PiXTJ1kPd?p=preview.
请参阅此 plunkr：https://plnkr.co/edit/uWUS9RaGJ34PiXTJ1kPd ?p =preview 。
回答by Pardeep Jain
you could do using changeevent call
你可以使用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>
Working Example https://plnkr.co/edit/dQZgSyw6uc67UNhNDlZv?p=preview
