12

我想<select>在表单中使用 a 让用户能够在不同的<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()。

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

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

4

4 回答 4

25

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

组件.html

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

组件.ts

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

  callType(value){
    console.log(value);
    this.order.type=value;
  }
于 2016-01-23T19:19:25.123 回答
5

几个小时以来一直在解决这个问题。

检查（不完整的）文档以在NgSelectOption页面中找到一个名为“ngValue”的项目

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

所以而不是使用

[value]="item"

利用：

[ngValue]="item"

如果您想在更改时执行某些操作，只需在 select 和 ngModelChange 事件上使用 ngModel。

于 2016-04-09T05:40:53.380 回答
1

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

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

蒂埃里

于 2016-01-22T15:58:49.397 回答
0

如果您有 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
于 2019-06-13T12:16:35.060 回答