12

<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 には、myApp.services から updateOrder() を呼び出す updateOrder() があります。

私の問題は、フォームからバックエンドにデータを送信しようとしているとき<input>です<select>。

誰かがこれまたは同様の問題に遭遇しましたか? ご協力いただきありがとうございます！

4

4 に答える 4

25

さまざまなオプションから値を取得する方法があります。このプランカーをチェックしてください

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;
  }
于 2016-01-23T19:19:25.123 に答える
5

この問題に数時間取り組んできました。

（不完全な）ドキュメントをチェックインして、「ngValue」というNgSelectOptionページの項目を見つけました

これが意図された用途かどうかはわかりませんが、うまく機能しているように見えました。

したがって、使用する代わりに

[value]="item"

使用する：

[ngValue]="item"

変更時に何かをしたい場合は、select および ngModelChange イベントで ngModel を使用するだけです。

于 2016-04-09T05:40:53.380 に答える
1

実際、私はあなたの問題を再現できません。と を使用した非常に単純な形式の plunkr を作成しましinputたselect。フォームを送信すると、バインドされたオブジェクトに実際の値が含まれています。この plunkr を参照してください: https://plnkr.co/edit/5C3agW7QZfcrdt88QzSh?p=preview。

あなたの問題を正しく理解していない場合は、遠慮なく教えてください。

ティエリー

于 2016-01-22T15:58:49.397 に答える