change - Angular2 accede a un cambio de evento selecto dentro del componente

ng value angular 2

Question

Trabajando con formularios Angular2s e intentando descubrir el proceso de manejo de eventos con Selects. Tengo un objeto Heros que está almacenado en las opciones. Lo que quiero hacer es que cuando se seleccione I hero, active un evento para el componente principal que hará algo con los resultados. Sin embargo, no puedo encontrar un ejemplo concreto de poder recibir un evento cuando la selección ha cambiado (es decir, se ha seleccionado un nuevo héroe en la lista).

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

¡Gracias por adelantado!

Answer 1

Ejecute el código al seleccionar el cambio y use una propiedad o index id como valor`:

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

obtener el valor seleccionado del 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);
}

Ver también https://github.com/angular/angular/issues/4843#issuecomment-170147058

Consulte también Elemento de selección de enlace para objetar en Angular 2

Answer 2

Parece que hay un espacio en ng2 que select no puede manejar objetos. Aquí hay una ronda de trabajo por ahora.

Cómo usar select / option / NgFor en una matriz de objetos en Angular2

Answer 3

Obtienes el objeto de una selección usando

[ngValue]="hero" 

en lugar de

[value]="hero".