Angular2 访问组件内的选择事件更改答案

【问题标题】：Angular2 access a select event change within the componentAngular2 访问组件内的选择事件更改
【发布时间】：2016-04-13 17:09:28
【问题描述】：

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

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

提前致谢！

【问题讨论】：

马贝stackoverflow.com/questions/31177984/selects-events-in-angular2
this.selectedHeroChange.emit(hero);
@EricMartinez 问题是它根本不会使用 onHeroChange 函数，因为我不确定如何/何时调用它。

标签： select typescript angular

【解决方案1】：

您可以通过使用从选择中获取对象

[ngValue]="hero"

而不是

[value]="hero".

【讨论】：

【解决方案2】：

在选择更改时执行代码并使用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

【讨论】：

我试图这样做，但发生的事情是 [value]="hero" 似乎是通过 toString 转换而不是存储实际对象。为了让这个解决方案起作用，我必须有 [value]="hero.id" 然后我需要遍历我的 onchange 事件列表，然后返回......这似乎是一个差距（此功能在 KO 中工作）
对于 TS，您的函数将如下所示：onheroChange(event: Event): void { ... }
感谢您的提示！仅仅一年多一点，但感觉就像很久以前：D
您不需要实现输出，<md-tab-group> 已经有了。您应该只需要添加一个您希望在我放置... 的选项卡更改时执行的表达式
更正我上面的（已删除）评论：github.com/angular/material2/blob/…

【解决方案3】：

似乎 ng2 中存在 select 无法处理对象的间隙。这是目前的工作轮次。

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

【讨论】：