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 - 如何從選擇/選項中獲取價值

回答

相關問題