¿Cómo puedo obtener una nueva selección en "select" en Angular 2?

Estoy usando Angular 2 (TypeScript).

Quiero hacer algo con la nueva selección, pero lo que obtengo onChange()es siempre la última selección. ¿Cómo puedo obtener la nueva selección?

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

Si no necesita enlace de datos bidireccional:

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

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

Para el enlace de datos bidireccional, separe los enlaces de eventos y propiedades:

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

Si deviceses una matriz de objetos, únete a en ngValuelugar de 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- no usa <form>
Plunker- usa <form>y usa la nueva API de formularios

Puede volver a pasar el valor al componente creando una variable de referencia en la etiqueta de selección #devicey pasándola al controlador de cambios onChange($event, device.value)debería tener el nuevo valor

<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);
}

¡Solo use [ngValue] en lugar de [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>

Me encontré con este problema mientras hacía el tutorial de formularios Angular 2 (versión TypeScript) en https://angular.io/docs/ts/latest/guide/forms.html

El bloque de selección / opción no permitía cambiar el valor de la selección seleccionando una de las opciones.

Hacer lo que sugirió Mark Rajcok funcionó, aunque me pregunto si hay algo que me perdí en el tutorial original o si hubo una actualización. En cualquier caso, agregando

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

a hero-form.component.ts en la clase HeroFormComponent

y

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

a hero-form.component.html en el <select>elemento lo hizo funcionar

use selectionChange en angular 6 y superior. ejemplo (selectionChange)= onChange($event.value)

Otra opción es almacenar el objeto en valor como una cadena:

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

componente:

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

Esta fue la única forma en que pude obtener un enlace bidireccional trabajando para establecer el valor de selección en la carga de la página. Esto se debió a que mi lista que llena el cuadro de selección no era exactamente el mismo objeto al que estaba vinculada mi selección y debe ser el mismo objeto, no solo los mismos valores de propiedad.

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

Utilicé esto para desplegar material angular. funciona bien

El último iónico 3.2.0 ha modificado (cambio) a (ionChange)

por ejemplo: HTML

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

TS

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

}

Angular 7/8

A partir de angular 6, el uso de la propiedad de entrada ngModel con la directiva de formas reactivas se ha desaprobado y eliminado por completo en angular 7+. Lea el documento oficial aquí.

Usando el enfoque de forma reactiva puede obtener / establecer datos seleccionados como;

      //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);
  }

En Angular 5 lo hice de la siguiente manera. obtener el objeto $ event.value en lugar de $ 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);
}

En Angular 8 simplemente puede usar "selectionChange" de esta manera:

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