Angular 2 - 如何从选择/选项中获取价值

Angular 2的大多数选择/选项解决方案都以我们返回实际内容的方式工作，而不是value属性。但是，由于我仍然在学习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. */

上述解决方案将创建下列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? */

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

谢谢您的建议。

来源

2016-04-21 uglycode

你的“我怎么喜欢它的工作”的例子工作：[plunker]（https://plnkr.co/edit/NZc3RWgERx2t2m1HWmCb?p=preview）。它返回分配给所选选项的'value'属性的'category.id'。我喜欢这种方法，因为它不会将属性添加到组件。 –

这真的很奇怪，在我的例子中，当我检查select/option元素时，我没有'value'属性。我基本上复制/粘贴你的例子 - 如果你检查元素，在你的榨取器中，每个选项都有一个'value'属性，而我的不是。我将使用生成的HTML更新我的原始问题。 – uglycode

您使用的是哪个版本的Angular beta？你有没有加载其他库？ –

正如在评论中讨论的，“我怎么想它的工作”的例子不工作：

<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的beta.15更多信息：

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

我喜欢这种方法，因为它不添加属性，也不需要使用<form>标签（就像在@ Thierry的回答中）。

来源

2016-04-22 14:31:55

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

来源

2016-04-21 15:05:06

你能解释一下'ngControl'到底做了什么，因为它是非常不好的文档（https：// angular.io/docs/js/latest/api/common/NgControl-class.html）？ – uglycode

是的，同意;-) Con trols可以访问表单元素的值，在更新时得到通知，应用验证（同步或异步）。有两种方法可以定义它们：内嵌'ngControl'或者用'ngFormControl' /'FormBuilder'编程。有关更多详情，请参阅此文章：http：//restlet.com/blog/2016/02/11/implementing-angular2-forms-beyond-basics-part-1/。 –

我使用了内联函数，因为在您的情况下，您只需要获取该值，以便在组件类中不会产生影响...... –

你可以做使用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

来源

2016-04-21 15:19:29

Angular 2 - 如何从选择/选项中获取价值

回答

相关问题