Angolare 2 - come ottenere il valore da select/option

Question

La maggior parte delle soluzioni select/option per Angular 2 funziona in modo da restituire il contenuto effettivo, non l'attributo value. Tuttavia, poiché sto ancora imparando Angular 2, voglio ottenere l'attuale attributo value facendo clic su un pulsante. Sono riuscito a risolvere un po 'questo problema, ma non sono sicuro che questo sia l'approccio corretto. Di seguito è l'esempio di come mi piacerebbe farlo funzionare:

<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. */ 

La soluzione di cui sopra crea il seguente codice HTML (si noti la mancanza di attributi value su 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> 

La soluzione qui di seguito funziona davvero, tuttavia, ho bisogno di un ngModel per farlo funzionare.

<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? */ 

Qual è il modo corretto di affrontare questa situazione?

Grazie per i vostri suggerimenti.

Answer 1

Come discusso nei commenti, il "come mi piacerebbe farlo funzionare" esempio funziona:

<select #selectedCategory> 
    <option *ngFor="#category of categories" [value]="category.id"> 
    {{category.name}} 
    </option> 
</select> 

<button (click)="getValueFromSelect(selectedCategory.value)">click me</button> 

Plunker

Tuttavia, noi deve usare la versione 15 per farlo funzionare. Vedere la changelog per beta.15 per ulteriori informazioni:

• selezionare: valore impostato singolarmente da ngModel (e1e44a9), chiude #7975#7978

---

Preferisco questo approccio, poiché non aggiunge un proprietà al componente, né è necessario utilizzare un tag <form> (come nella risposta @ Thierry).

Answer 2

è possibile utilizzare un controllo definito in linea con la direttiva 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> 

Vai a questa plunkr: https://plnkr.co/edit/uWUS9RaGJ34PiXTJ1kPd?p=preview.

Answer 3

si potrebbe fare usando chiamata change evento

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

lavoro Esempio https://plnkr.co/edit/dQZgSyw6uc67UNhNDlZv?p=preview