Angular 2:如何从表单的不同选项中获取选定的值? [英] Angular 2: How to get the selected value from different options of a form?

问题描述

我想在表单中使用 来让用户能够在不同的 之间更新值.我在这里使用了指南中的技术:https://angular.io/docs/ts/latest/guide/forms.html.这是我正在谈论的示例:

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

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

我的问题是当我尝试将数据从表单发送到后端时:所有带有 <input> 的部分都可以，但带有 < 的部分不行;select>(它返回原始值，而不是选择的值).

有没有人遇到过这个或类似的问题?感谢您的帮助！

解决方案

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

component.html

<option *ngFor="#type of types" [value]="type">{{type}}</option></选择>

组件.ts

this.types = [ 'type1', 'type2', 'type3' ];this.order = {类型:'type1'};呼叫类型(值){控制台日志(值)；this.order.type=value;}

I would like to use a <select> in a form to let the user being able to update values among different <option>. I have used the technique from the guide here: https://angular.io/docs/ts/latest/guide/forms.html. Here is the sample I am talking about:

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

In my order-details.component I have got an updateOrder() which calls the updateOrder() from myApp.services.

My problem is when I am trying to send the data from the form to the back-end: all the parts with an <input> are OK, but not those with <select> (it returns the original values, and not the one selected).

Does anyone have encountered this or a similar problem? Thanks for your help!

解决方案

There is a way to get the value from different options. check this 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;
  }

这篇关于Angular 2:如何从表单的不同选项中获取选定的值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！