Como posso obter uma nova seleção em “select” no Angular 2?

Eu estou usando Angular 2 (TypeScript).

Eu quero fazer algo para nova seleção, mas o que eu tenho em onChange () é sempre a última seleção. Como posso obter uma nova seleção?

 {{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 você não precisa de vinculação de dados bidirecional:

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

    Para binding de dados bidirecional, separe as ligações de evento e propriedade:

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

    Se os devices forem uma matriz de objects, ligue-se ao ngValue vez do 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 – não usa


    Plunker – usa

    e usa a nova API de formulários

    Você pode passar o valor de volta para o componente criando uma variável de referência no #device marca de seleção e passando-o para o manipulador de alterações onChange($event, device.value) deve ter o novo valor

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

    Apenas use [ngValue] em vez 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; } } 

    Eu corri para este problema ao fazer o tutorial de formas Angular 2 (versão TypeScript) em https://angular.io/docs/ts/latest/guide/forms.html

    O bloco de seleção / opção não permitia que o valor da seleção fosse alterado selecionando uma das opções.

    Fazer o que Mark Rajcok sugeriu funcionou, embora eu esteja me perguntando se há algo que eu perdi no tutorial original ou se houve uma atualização. Em qualquer caso, adicionando

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

    para hero-form.component.ts na class HeroFormComponent

    e

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

    a hero-form.component.html no elemento fez com que funcionasse

    Outra opção é armazenar o object em valor como uma string:

      

    componente:

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

    Essa foi a única maneira de eu conseguir trabalhar em duas vias para definir o valor de seleção no carregamento da página. Isso ocorreu porque minha lista que preenche a checkbox de seleção não era o mesmo object exato ao qual minha seleção estava vinculada e precisa ser o mesmo object, não apenas os mesmos valores de propriedade.

       {{spinnerValue.description}}  

    Eu usei isso para dropdown material angular. funciona bem

    mais recente iônica 3.2.0 modificaram (alteração) para (ionChange)

    por exemplo: HTML

      1  

    TS

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

    Em Angular 5 eu fiz da seguinte maneira. obtenha o object $ event.value em vez de $ event.target.value

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

    use selectionChange em angular 6 e acima. example (selectionChange)= onChange($event.value)