select option ngfor value




Angular2 accède à un changement d'événement select dans le composant (2)

Travailler avec des formulaires Angular2s et essayer de comprendre le processus de gestion des événements avec des sélections. J'ai un objet Heros qui est stocké dans les options. Ce que je veux faire est que quand je suis sélectionné, déclenche un événement vers le composant parent qui fera quelque chose avec les résultats. Cependant, je ne peux pas trouver un exemple concret de pouvoir recevoir un événement lorsque la sélection a changé (c'est-à-dire qu'un nouveau héros de la liste a été sélectionné).

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

Merci d'avance!


Exécute le code sur select change et utilise une propriété id ou un index comme valeur`:

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

obtenir la valeur sélectionnée de l'événement

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

Voir aussi https://github.com/angular/angular/issues/4843#issuecomment-170147058

Voir aussi Liaison Sélectionner l'élément à l'objet dans Angular 2






angular