Come posso ottenere una nuova selezione in "select" in Angular 2?

Sto usando Angular 2 (TypeScript).

Voglio fare qualcosa con la nuova selezione, ma quello che ottengo onChange()è sempre l'ultima selezione. Come posso ottenere la nuova selezione?

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

Se non hai bisogno di un'associazione dati bidirezionale:

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

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

Per l'associazione dati bidirezionale, separare i collegamenti evento e proprietà:

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

Se devicesè una matrice di oggetti, associa ngValueinvece di 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- non utilizza <form>
Plunker: utilizza <form>e utilizza l'API dei nuovi moduli

È possibile restituire il valore al componente creando una variabile di riferimento sul tag select #devicee passandolo nel gestore modifiche onChange($event, device.value)dovrebbe avere il nuovo valore

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

Basta usare [ngValue] invece di [valore] !!

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>

Ho riscontrato questo problema durante l'esercitazione su Angular 2 form (versione TypeScript) su https://angular.io/docs/ts/latest/guide/forms.html

Il blocco select / option non consentiva di modificare il valore della selezione selezionando una delle opzioni.

Fare ciò che Mark Rajcok ha suggerito ha funzionato, anche se mi chiedo se c'è qualcosa che mi è sfuggito nel tutorial originale o se c'è stato un aggiornamento. In ogni caso, aggiungendo

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

a hero-form.component.ts nella classe HeroFormComponent

e

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

a hero-form.component.html nell'elemento l'ha <select>fatto funzionare

usa selectionCambia in angolare 6 e sopra. esempio (selectionChange)= onChange($event.value)

Un'altra opzione è quella di memorizzare l'oggetto nel valore come una stringa:

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

Questo è stato l'unico modo in cui ho potuto far funzionare l'associazione bidirezionale per impostare il valore di selezione al caricamento della pagina. Questo perché il mio elenco che popola la casella di selezione non era esattamente lo stesso oggetto a cui era associata la mia selezione e deve essere lo stesso oggetto, non solo gli stessi valori di proprietà.

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

L'ho usato per il menu a discesa del materiale angolare. funziona bene

l'ultimo ionico 3.2.0 è stato modificato (cambia) in (ionChange)

ad es .: HTML

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

TS

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

}

Angolare 7/8

A partire dall'angolare 6, l'uso della proprietà di input ngModel con la direttiva sulle forme reattive è stato deprecato e rimosso del tutto in angolare 7+. Leggi il documento ufficiale qui.

Utilizzando l'approccio a forma reattiva è possibile ottenere / impostare i dati selezionati come;

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

In Angular 5 l' ho fatto nel modo seguente. ottenere l'oggetto $ event.value invece di $ 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);
}

In Angular 8 puoi semplicemente usare "selectionChange" in questo modo:

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