Come posso ottenere una nuova selezione in “seleziona” in Angular 2?

Sto usando Angular 2 (TypeScript).

Voglio fare qualcosa per una nuova selezione, ma quello che ho ottenuto su onChange () è sempre l’ultima selezione. Come posso ottenere una nuova selezione?

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

Se non hai bisogno di associazione dati bidirezionale:

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

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

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

Se i devices sono array di oggetti, eseguire il binding a ngValue anziché a value :

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


Plunker : utilizza

e utilizza la nuova API di moduli

Puoi riportare il valore nel componente creando una variabile di riferimento sul tag select #device e passandolo nel gestore delle modifiche onChange($event, device.value) dovrebbe avere il nuovo valore

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

Usa solo [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; } } 

Mi sono imbattuto in questo problema mentre facevo il tutorial sui form di Angular 2 (versione di TypeScript) su https://angular.io/docs/ts/latest/guide/forms.html

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

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

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

su hero-form.component.ts nella class HeroFormComponent

e

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

a hero-form.component.html nell’elemento ha funzionato

Un’altra opzione è quella di memorizzare l’object in valore come una stringa:

  

componente:

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

Questo era l’unico modo in cui potevo ottenere un legame bidirezionale funzionante per impostare il valore di selezione sul caricamento della pagina. Questo perché la mia lista che popola la casella di selezione non era lo stesso object in cui la mia selezione era vincasting e doveva essere lo stesso object, non solo gli stessi valori di proprietà.

   {{spinnerValue.description}}  

Ho usato questo per il menu a discesa di materiale angular. funziona bene

l’ultima versione 3.2.0 ionica ha modificato (cambia) in (ionChange)

ad esempio: HTML

  1  

TS

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

In Angular 5 l’ ho fatto con il seguente modo. ottiene l’object $ event.value invece di $ event.target.value

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

utilizzare la selezione Cambia in angular 6 e sopra. esempio (selectionChange)= onChange($event.value)