typescript - Bind each array element to option tag -

i trying bind array element class option tag.

in angular.io "tour of hero" tutorial ( https://angular.io/docs/ts/latest/tutorial/toh-pt2.html ) following list :

  <li *ngfor="let hero of heroes"     (click)="onselect(hero)">     <span class="badge">{{hero.id}}</span> {{hero.name}}   </li> 

if understand right *ngfor="let hero of heroes" associate each hero ( each element in heroes array ) li element , display caracteristics of associated hero {{hero.id}} example.

i associate because if simple loop print don't see how hero object after onselect(hero).

i have been trying same option :

   <option *ngfor="let perso of persos">      <span>{{perso.id}} : </span> {{perso.nom}}    </option> 

but

(click)="onselect(hero)" 

isn't effective since click event isn't triggered option. couldn't find right trigger. , additionnal information welcomed.

you can't bind object [value] property of option element.

i bind object's id [value] property of option element , use (change) event of select.

see example below:

import { component } '@angular/core';  @component({   selector: 'my-app',   template: `     select favorite serie:      <select (change)="onchange($event.target.value)">       <option *ngfor="let serie of series" [value]="serie.id">{{ serie.name }}</option>     </select>      <br />     <br />      selected serie: <br />     <span *ngif="selectedserie">       {{ selectedserie.id  }} - {{ selectedserie.name }}     </span>   ` }) export class appcomponent {    private series: any[];   private selectedserie: any;    constructor() {     this.series = [       { id: 1, name: 'friends' },       { id: 2, name: 'how met mother' },       { id: 3, name: 'modenr family' }     ];      this.selectedserie = this.series[0];   }    onchange(serieid: any): void {     this.selectedserie = this.series.find(serie => serie.id == serieid);   } } 

see complete example here: http://plnkr.co/edit/ooyx3lin1po3qffkn7lq