Question

我想在表单中使用<select>让用户能够更新不同<option>之间的值。我使用了指南中的技术：https://angular.io/docs/ts/latest/guide/forms.html。以下是我所说的样本：

<div class="form-group">
    <label for="type">Type :</label>
    <select class="form-control" [(ngModel)]="order.type" ngControl="type">
        <option *ngFor="#type of types" [value]="type">{{type}}</option>
    </select>
</div>

在我的order-details.component中，我有一个updateOrder（），它从myApp.services调用updateOrder（）。

我的问题是当我尝试将数据从表单发送到后端时：所有带<input>的部分都可以，但不是<select>的部分（它返回原始部分）值，而不是选定的值。

有没有人遇到过这个或类似的问题？谢谢你的帮助！

Answer 1

有一种方法可以从不同的选项中获取值。检查此plunker

component.html

 <select class="form-control" #t (change)="callType(t.value)">
      <option *ngFor="#type of types" [value]="type">{{type}}</option>
    </select>

component.ts

this.types = [ 'type1', 'type2', 'type3' ];
   this.order = {
      type: 'type1'          
  };  

  callType(value){
    console.log(value);
    this.order.type=value;
  }

Answer 2

已经解决了这个问题几个小时了。

选中（不完整）文档，在NgSelectOption页面中查找名为“ngValue”的项目

不确定这是否是预期用途，但似乎工作正常。

所以不要使用

[value]="item"

使用：

[ngValue]="item"

如果你想在更改时做某事，只需在select和ngModelChange事件上使用ngModel。

Answer 3

事实上我无法重现你的问题。我用一个非常简单的形式创建了一个带有input和select的plunkr。当我提交表单时，我在绑定对象中有实际值。请参阅此plunkr：https://plnkr.co/edit/5C3agW7QZfcrdt88QzSh?p=preview。

如果我没有正确理解您的问题，请随时告诉我。

亨利

Answer 4

如果您的select标签具有静态的硬编码值，如下所示：

<select #quantity>
  <option value="one">1</option>
  <option value="two">2</option>
  <option value="three">3</option>
  <option value="four">4</option>
  <option value="five">5</option>
</select>

您可以执行以下操作：

@ViewChild('quantity') quantity: ElementRef;

console.log(this.quantity.nativeElement.value);  // will print value of the currently selected option

Angular 2：如何从表单的不同选项中获取所选值？

4 个答案: