Làm cách nào tôi có thể nhận được lựa chọn mới trong các lựa chọn trên bầu trời trong Angular 2?

Tôi đang sử dụng Angular 2 (TypeScript).

Tôi muốn làm một cái gì đó với lựa chọn mới, nhưng những gì tôi nhận onChange()được luôn là lựa chọn cuối cùng. Làm thế nào tôi có thể có được lựa chọn mới?

<select [(ngModel)]="selectedDevice" (change)="onChange($event)">
   <option *ngFor="#i of devices">{{i}}</option>
</select>

onChange($event) {
    console.log(this.selectedDevice);
    // I want to do something here with the new selectedDevice, but what I
    // get here is always the last selection, not the one I just selected.
}

Nếu bạn không cần ràng buộc dữ liệu hai chiều:

<select (change)="onChange($event.target.value)">
    <option *ngFor="let i of devices">{{i}}</option>
</select>

onChange(deviceValue) {
    console.log(deviceValue);
}

Đối với liên kết dữ liệu hai chiều, hãy tách các ràng buộc thuộc tính và sự kiện:

<select [ngModel]="selectedDevice" (ngModelChange)="onChange($event)" name="sel2">
    <option [value]="i" *ngFor="let i of devices">{{i}}</option>
</select>

export class AppComponent {
  devices = 'one two three'.split(' ');
  selectedDevice = 'two';
  onChange(newValue) {
    console.log(newValue);
    this.selectedDevice = newValue;
    // ... do other stuff here ...
}

Nếu deviceslà mảng của các đối tượng, liên kết với ngValuethay vì value:

<select [ngModel]="selectedDeviceObj" (ngModelChange)="onChangeObj($event)" name="sel3">
  <option [ngValue]="i" *ngFor="let i of deviceObjects">{{i.name}}</option>
</select>
{{selectedDeviceObj | json}}

export class AppComponent {
  deviceObjects = [{name: 1}, {name: 2}, {name: 3}];
  selectedDeviceObj = this.deviceObjects[1];
  onChangeObj(newObj) {
    console.log(newObj);
    this.selectedDeviceObj = newObj;
    // ... do other stuff here ...
  }
}

Plunker- không sử dụng <form>
Plunker- sử dụng <form>và sử dụng API biểu mẫu mới

Bạn có thể chuyển giá trị trở lại vào thành phần bằng cách tạo biến tham chiếu trên thẻ chọn #devicevà chuyển nó vào trình xử lý thay đổi onChange($event, device.value)sẽ có giá trị mới

<select [(ng-model)]="selectedDevice" #device (change)="onChange($event, device.value)">
    <option *ng-for="#i of devices">{{i}}</option>
</select>

onChange($event, deviceValue) {
    console.log(deviceValue);
}

Chỉ cần sử dụng [ngValue] thay vì [value] !!

export class Organisation {
  description: string;
  id: string;
  name: string;
}
export class ScheduleComponent implements OnInit {
  selectedOrg: Organisation;
  orgs: Organisation[] = [];

  constructor(private organisationService: OrganisationService) {}

  get selectedOrgMod() {
    return this.selectedOrg;
  }

  set selectedOrgMod(value) {
    this.selectedOrg = value;
  }
}


<div class="form-group">
      <label for="organisation">Organisation
      <select id="organisation" class="form-control" [(ngModel)]="selectedOrgMod" required>
        <option *ngFor="let org of orgs" [ngValue]="org">{{org.name}}</option>
      </select>
      </label>
</div>

Tôi gặp vấn đề này trong khi thực hiện hướng dẫn biểu mẫu Angular 2 (phiên bản TypeScript) tại https://angular.io/docs/ts/latest/guide/forms.html

Khối chọn / tùy chọn không cho phép thay đổi giá trị của lựa chọn bằng cách chọn một trong các tùy chọn.

Làm những gì Mark Rajcok đề xuất có hiệu quả, mặc dù tôi tự hỏi liệu có điều gì tôi đã bỏ lỡ trong hướng dẫn ban đầu hoặc nếu có bản cập nhật. Trong mọi trường hợp, thêm

onChange(newVal) {
    this.model.power = newVal;
}

tới hero-form.component.ts trong lớp HeroFormComponent

và

(change)="onChange($event.target.value)"

to hero-form.component.html trong <select>phần tử làm cho nó hoạt động

sử dụng selectChange trong góc 6 trở lên. thí dụ (selectionChange)= onChange($event.value)

Một tùy chọn khác là lưu trữ đối tượng theo giá trị dưới dạng chuỗi:

<select [ngModel]="selectedDevice | json" (ngModelChange)="onChange($event)">
    <option [value]="i | json" *ngFor="let i of devices">{{i}}</option>
</select>

thành phần:

onChange(val) {
    this.selectedDevice = JSON.parse(val);
}

Đây là cách duy nhất tôi có thể làm việc ràng buộc hai chiều để đặt giá trị chọn khi tải trang. Điều này là do danh sách của tôi điền vào hộp chọn không phải là cùng một đối tượng như lựa chọn của tôi bị ràng buộc và nó cần phải là cùng một đối tượng, không chỉ là các giá trị thuộc tính giống nhau.

<mat-form-field>
<mat-select placeholder="Vacancies" [(ngModel)]="vacanciesSpinnerSelectedItem.code" (ngModelChange)="spinnerClick1($event)"
    [ngModelOptions]="{standalone: true}" required>
    <mat-option *ngFor="let spinnerValue of vacanciesSpinnerValues" [value]="spinnerValue?.code">{{spinnerValue.description}}</mat-option>
</mat-select>

Tôi đã sử dụng điều này cho thả xuống Vật liệu góc. hoạt động tốt

ion 3.2.0 mới nhất đã sửa đổi (thay đổi) thành (ionChange)

ví dụ: HTML

<ion-select (ionChange)="function($event)"> <ion-option>1<ion-option>
</ion-select>

TS

function($event){
// this gives the selected element
 console.log($event);

}

Góc 7/8

Kể từ góc 6, việc sử dụng thuộc tính đầu vào ngModel với chỉ thị dạng phản ứng đã không được chấp nhận và loại bỏ hoàn toàn trong 7+ góc. Đọc tài liệu chính thức ở đây.

Sử dụng phương pháp tiếp cận biểu mẫu phản ứng, bạn có thể nhận / đặt dữ liệu đã chọn như;

      //in your template
 <select formControlName="person" (change)="onChange($event)"class="form-control">
    <option [value]="null" disabled>Choose person</option>
      <option *ngFor="let person of persons" [value]="person"> 
        {{person.name}}
    </option>
 </select> 


 //in your ts
 onChange($event) {
    let person = this.peopleForm.get("person").value
    console.log("selected person--->", person);
    // this.peopleForm.get("person").setValue(person.id);
  }

Trong Angular 5 tôi đã làm theo cách sau. lấy đối tượng $ event.value thay vì $ event.target.value

<mat-form-field color="warn">
   <mat-select (ngModelChange)="onChangeTown($event)" class="form-width" formControlName="branch" [(ngModel)]="branch" placeholder="Enter branch">
     <mat-option *ngFor="let branch of branchs" [value]="branch.value">
                  {{ branch.name }}
     </mat-option>
   </mat-select>
</mat-form-field>

onChangeTown(event): void {
  const selectedTown = event;
  console.log('selectedTown: ', selectedTown);
}

Trong Angular 8, bạn chỉ cần sử dụng "selectChange" như thế này:

 <mat-select  [(value)]="selectedData" (selectionChange)="onChange()" >
  <mat-option *ngFor="let i of data" [value]="i.ItemID">
  {{i.ItemName}}
  </mat-option>
 </mat-select>