typescript - Angular2 få tilgang til en select-hendelsesendring innenfor komponenten

Å jobbe med Angular2s skjemaer og prøve å finne ut prosessen for å håndtere hendelser med select-elementer. Jeg har et objekt Heros som er lagret i alternativene. Det jeg ønsker å gjøre er at når en helt blir valgt, skal det utløses en hendelse til foreldreakomponenten som vil gjøre noe med resultatene. Imidlertid kan jeg ikke finne et konkret eksempel på hvordan man kan motta en hendelse når valget har endret seg (dvs. en ny helt i listen har blitt valgt).

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

Takk på forhånd!

Svar #1

Kjør kode ved valg-endring og bruk en id-egenskap eller index som verdi:

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

hent den valgte verdien fra hendelsen

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

Se også https://github.com/angular/angular/issues/4843#issuecomment-170147058

Se også Binding av select-element til objekt i Angular 2

Svar #2

Det ser ut til å være et gap i ng2 som select ikke kan håndtere objekter. Her er en midlertidig løsning foreløpig.

Hvordan bruke select/option/NgFor på en array av objekter i Angular2

Relaterte artikler