select - Angular2 访问组件内的选择事件更改

Question

使用 Angular2s 表单并尝试找出使用选择处理事件的过程。我有一个对象 Heros 存储在选项中。我想要做的是，当我选择英雄时，向父组件触发一个事件，该事件将对结果进行处理。但是，我找不到在选择发生变化时能够接收事件的具体示例(即，列表中的新英雄被选中)。

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

提前致谢!

Answer 1

在选择更改时执行代码并使用 id 属性或 index 作为值`:

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

从事件中获取选择的值

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

另见 https://github.com/angular/angular/issues/4843#issuecomment-170147058

另见 Binding select element to object in Angular 2