How to get the number in [(ngModel)] in Angular 2?

Question

How to get the number in [(ngModel)] in Angular 2?

<select [(ngModel)]="levelNum"> <option *ngFor="#level of levels" [value]="level.num">{{level.name}}</option> </select> levelNum:number; levels:Array<Object> = [ {num: 0, name: "AA"}, {num: 1, name: "BB"} ]; 

I tried adding type="number" in different places.

  <select type="number" [(ngModel)]="levelNum"> <option *ngFor="#level of levels" [value]="level.num">{{level.name}}</option> </select> 

and

  <select [(ngModel)]="levelNum"> <option type="number" *ngFor="#level of levels" [value]="level.num">{{level.name}}</option> </select> 

But when I select a new item, levelNum still becomes a string.

Answer 1

Selecting with * ngFor in Angular2 does not seem to work properly when using objects. They discovered the problem on github , but it is still not resolved.

Until this is fixed, I would do something like changing the string value to a number whenever the selection value changes.

 @Component({ selector: 'my-app', template:` <h1>Selecting Number</h1> <select type="number" [(ngModel)]="levelNum" (ngModelChange)="toNumber()"> <option *ngFor="#level of levels" [value]="level.num">{{level.name}}</option> </select> {{levelNum}} `, }) export class AppComponent { levelNum:number; levels:Array<Object> = [ {num: 0, name: "AA"}, {num: 1, name: "BB"} ]; toNumber(){ this.levelNum = +this.levelNum; console.log(this.levelNum); } } 

Answer 2

I think the easiest solution would be to throw it on a number when you need to use it ... Simple +this.levelNum will do. http://plnkr.co/edit/SxQfNlUB4RNdo2OndM9o