Winkel-2: Wie man den ausgewählten Wert aus verschiedenen Optionen eine form?

Ich würde gerne eine <select> in einer form, die lassen die Benutzer in der Lage, die Werte zu aktualisieren zwischen verschiedenen <option>. Ich habe die Technik aus der Anleitung hier: https://angular.io/docs/ts/latest/guide/forms.html. Hier ist die Probe, 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 meine Bestellung-details.Komponente habe ich eine updateOrder() die Aufrufe der updateOrder() aus der Anwendung.services.

Mein problem ist wenn ich versuche zu senden, die Daten aus dem Formular an das back-end: alle Teile mit einem <input> sind OK, aber nicht diejenigen, die mit <select> (es gibt die ursprünglichen Werte, und nicht der gewählten).

Hat jemand auf dieses oder ein ähnliches problem?
Vielen Dank für Ihre Hilfe!

Sieht aus wie ein dup von stackoverflow.com/questions/34686855/...

InformationsquelleAutor Yannick Morel | 2016-01-22

Es ist ein Weg, um den Wert von verschiedenen Optionen.
überprüfen Sie diese plunker

component.html

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

Komponente.ts

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

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

InformationsquelleAutor Mubashir

4

Wurde der Bekämpfung dieses Problems für ein paar Stunden.

Überprüft die (unvollständige) Dokumentation zu finden, die ein Element in der NgSelectOption Seite namens "ngValue"

Nicht sicher, ob dies ist die beabsichtigte Verwendung, aber es schien zu funktionieren.

Anstatt also mit
```
[value]="item"
```
Verwenden:
```
[ngValue]="item"
```
Verwenden Sie einfach ngModel auf die select-und die ngModelChange Ereignis, wenn Sie etwas tun wollen, wenn Sie sich ändert.
- ngValue können auf ein Objekt verweisen, während der Wert bezieht sich auf nur ein primitiver Wert. Zum Beispiel, wenn "Element" war in diesem Fall ein Objekt, und die Optionen label war {{item.name}} könnten Sie dann tun <select size="10" [(ngModel)]="this.selected"> <option *ngFor="let item of items" [ngValue]="item">{{item.Name}}</option> </select> in diesem Fall.ausgewählt würde ein Objekt sein. Wenn Sie nur [value] diese.ausgewählt würde ein string namens '{Objekt}'
InformationsquelleAutor Jason
1

In der Tat kann ich nicht nachvollziehen dein problem. Ich erstellte eine plunkr mit einer sehr einfachen form mit einem input und ein select. Wenn ich das Formular abschicken, habe ich die tatsächlichen Werte in der gebundenen Objekts. Sehen Sie diese plunkr: https://plnkr.co/edit/5C3agW7QZfcrdt88QzSh?p=preview.

Fühlen Sie sich frei, mir zu sagen, wenn ich nicht richtig dein problem verstanden.

Thierry
- Eigentlich, so scheint es, dass Sie reproduziert haben mein problem in Ihrem plunkr: wenn ich versuche, das Formular Absenden, erhalte ich den richtigen Wert innerhalb des <input>, aber egal welche ich wähle in der <select> das console-log sagt "type1". Nicht du hast das gleiche Verhalten? Vielen Dank für die Zeit die Sie sich genommen haben um das problem zu reproduzieren, indem Sie die Art und Weise 🙂
- Mubashir haben mein problem gelöst, indem jetzt, aber vielen Dank für deine Zeit!
InformationsquelleAutor Thierry Templier

Wenn Sie statische, hartcodierte Werte für das select-tag wie folgt:

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

Können Sie Folgendes tun:

@ViewChild('quantity') quantity: ElementRef;

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

InformationsquelleAutor Anand Kumar

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.