Angular 2 issue getting select option value

Question

I have a select

<select name='shape_id' ngModel (change)='changeShape($event.target.value)'>
  <option *ngFor="let shape of shapes" [ngValue]="shape.id">{{shape.name}}</option>
</select>

Here is the data.

  shapes = [
    {id:'1', name:'Angle'},
    {id:'2', name:'Bar'},
   ];

I can't get the value.

 changeShape(shape){
    console.log(shape);
  }

This outputs "0: 1", but I want the value 1.

Here is what the option looks like in inspector.

<option value="0: 1" ng-reflect-ng-value="1">Angle</option>

How do I get the id value 1?

Answer 1

Change [ngValue] to [value]

  <select name="shape_id" (change)="changeShape($event.target)">
    <option *ngFor="let shape of shapes" [value]="shape.id">
      {{shape.name}}
    </option>
  </select>

and shape to shape.value.

changeShape(shape){
  console.log(shape.value);
}