Angular 2-Как получить значение из select / option

большинство решений select / option для Angular 2 работают таким образом, что мы возвращаем фактическое содержимое, а не . Однако, поскольку я все еще изучаю 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 (обратите внимание на отсутствие value атрибут 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>

Решение ниже на самом деле работает, однако мне нужен 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? */

Как правильно подойти к этой ситуации?

Спасибо за ваши предложения.

6
angular javascript

3 ответов

Как обсуждалось в комментариях, пример" как я хотел бы, чтобы он работал " работает:

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

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

Plunker

однако, мы должны использовать бета-версии.15 для этой работы. Вижу изменений для бета-версии.15 для получения дополнительной информации:

  • select: установить значение отдельно от ngModel (e1e44a9), закрывает #7975 #7978

Я предпочитаю этот подход, так как он не добавьте свойство в компонент, и нам не нужно использовать <form> tag (как в ответе @Thierry).

14

вы можете использовать элемент управления, определенный в строке

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

0