Angular 2: Wie erhält man den ausgewählten Wert aus verschiedenen Optionen eines Formulars?

Question

Ich möchte eine <select> in einem Formular verwenden, um den Benutzer in der Lage sein, Werte zwischen verschiedenen <option> zu aktualisieren. Ich habe die Technik aus der Anleitung hier verwendet: https://angular.io/docs/ts/latest/guide/forms.html. Hier ist die Probe über die ich spreche:

<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 meiner Bestellung-details.component Ich habe haben eine updateOrder(), die die updateOrder() aufruft, von myApp.services.

Mein Problem ist, wenn ich versuche, die Daten aus dem Formular an das Back-End zu senden: alle Teile mit einem <input> sind in Ordnung, aber nicht mit <select> (es gibt die ursprünglichen Werte und nicht die eine ausgewählt).

Hat jemand dieses oder ein ähnliches Problem festgestellt? Danke für Ihre Hilfe!

Answer 1

Es gibt einen Weg, um den Wert von verschiedenen Optionen zu erhalten. dies überprüfen 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

In der Tat kann ich Ihr Problem nicht reproduzieren. Ich habe mit einem input und einem select einen Plunkr mit einer sehr einfachen Form erstellt. Wenn ich das Formular absende, habe ich tatsächliche Werte in dem gebundenen Objekt. Siehe diese Plunkr: https://plnkr.co/edit/5C3agW7QZfcrdt88QzSh?p=preview.

Fühlen Sie sich frei, mir zu sagen, wenn ich Ihr Problem nicht richtig verstanden habe.

Thierry