web-dev-qa-db-ja.com

Angular2は、コンポーネント内の選択イベントの変更にアクセスします

Angular2sフォームを使用して、selectでイベントを処理するプロセスを把握しようとしています。オプションに保存されているオブジェクト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);
   }    
}

前もって感謝します！

selecttypescriptangular
17
cjr

変更を選択してコードを実行し、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 も参照してください

参照 Angular 2 のオブジェクトへのselect要素のバインド

11
Günter Zöchbauer

Selectがオブジェクトを処理できないというng2のギャップがあるようです。これが今の仕事のラウンドです。

Angular2のオブジェクトの配列でselect/option/NgForを使用する方法

6
cjr

を使用してselectからオブジェクトを取得します

[ngValue]="hero"

の代わりに

[value]="hero".
2
Robin