Góc 2: Cách lấy giá trị được chọn từ các tùy chọn khác nhau của biểu mẫu?

Question

Tôi muốn sử dụng một hình thức <select> để cho phép người dùng có thể cập nhật các giá trị trong số khác nhau <option>. Tôi đã sử dụng kỹ thuật từ hướng dẫn tại đây: https://angular.io/docs/ts/latest/guide/forms.html. Đây là mẫu tôi đang nói về:

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

Trong đơn đặt hàng-details.component Tôi có bản cập nhậtOrder() gọi là updateOrder() từ myApp.services.

Vấn đề của tôi là khi tôi đang cố gắng gửi dữ liệu từ biểu mẫu đến mặt sau: tất cả các bộ phận có <input> đều được chấp nhận, nhưng không phải là <select> (nó trả về giá trị ban đầu chứ không phải giá trị được chọn).

Có ai đã gặp phải sự cố này hoặc vấn đề tương tự không? Cảm ơn sự giúp đỡ của bạn!

Answer 1

Có cách để lấy giá trị từ các tùy chọn khác nhau. kiểm tra này 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

Thực tế tôi không thể tái tạo sự cố của bạn. Tôi tạo ra một plunkr với một hình thức rất đơn giản với một input và một select. Khi tôi gửi biểu mẫu, tôi có các giá trị thực trong đối tượng bị ràng buộc. Xem plunkr này: https://plnkr.co/edit/5C3agW7QZfcrdt88QzSh?p=preview.

Hãy cho tôi biết nếu tôi không hiểu chính xác vấn đề của bạn.

Thierry