Angular2 accede a una modifica evento selezionata all'interno del componente

Question

Lavorando con i moduli di Angular2s e cercando di capire il processo di gestione degli eventi con selects. Ho un oggetto Heros che è memorizzato nelle opzioni. Quello che voglio fare è che quando viene selezionato I Hero, si attiva un evento per il componente genitore che farà qualcosa con i risultati. Tuttavia, non riesco a trovare un esempio concreto di poter ricevere un evento quando la selezione è cambiata (cioè un nuovo eroe nell'elenco è stato selezionato).

interface Hero { 
    id: number; 
    name: string; 
} 
@Component({ 
    selector: 'my-app', 
    template:` 
    <h1>{{title}}</h1> 
    <form> 
    <select> 
     <option *ngFor="#hero of heros " 
       [value]="hero"> 
      {{hero .name}} 
     </option> 
    </select> 
    </form> 
` 
}) 
    export class AppComponent { 
    @Input() heros:Observable<Hero> 
    @Output("selectedHeroChange") selectedHeroChange:EventEmitter<any> = new EventEmitter 

    onHeroChange(hero:Hero){ 
     this.selectedHeroChange._next(hero); 
    }  
} 

Grazie in anticipo!

Answer 1

eseguire codice su selezionare il cambiamento e utilizzare una proprietà o idindex come value`:

<select (change)="onHeroChange($event)"> 
    <option *ngFor="#hero of heros; #i=index" 
    [value]="hero.id"> 
     <!-- [value]="i" --> 
     {{hero.name}} 
    </option> 
</select> 

ottenere il valore selezionato dall'evento

onHeroChange(event:Event):void { 
    Hero hero = heros.firstWhere(
     (Hero hero) => hero.id == (event.target as SelectElement).value); 
    // Hero hero = heros[int.parse((event.target as SelectElement).value)]; 
    selectedHero = hero; 
    selectedHeroChange.add(hero); 
} 

Vedi anche https://github.com/angular/angular/issues/4843#issuecomment-170147058

Vedi anche Binding select element to object in Angular 2

Answer 2

Sembra che vi sia uno spazio vuoto in ng2 che selezionare non può gestire oggetti. Ecco un round di lavoro per ora.

How to use select/option/NgFor on an array of objects in Angular2

Answer 3

si ottiene l'oggetto da un prescelto utilizzando

[ngValue]="hero" 

invece di

[value]="hero".