如何在 Angular 2 中获取 [(ngModel)] 中的数字

Question

如何在 Angular 2 中获取 [（ngModel）] 中的数字？

<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"}
];

我试图在不同的地方添加type="number"。

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

和

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

但是当我选择一个新项目时，levelNum仍然变成了一个字符串。

Answer 1

Angular2 中使用 *ngFor 的选择在使用对象时似乎无法正常工作。 他们已经在 github 中打开了这个问题，但仍未解决。

在

解决此问题之前，我会做一些事情，例如在更改选择值时将字符串值更改为数字。

@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

我认为最简单的解决方案是在需要使用它时将其转换为数字......简单的+this.levelNum就可以了。 http://plnkr.co/edit/SxQfNlUB4RNdo2OndM9o