2016-02-18 66 views
6

如何在Angular 2的[(ngModel)]中獲取數字?如何在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仍就成了一個字符串。

+1

如果您定義了一個接口並使用它來代替對象,其中num是數字類型會發生什麼? –

+0

@DavidL我實際上有一個'interface Level {num:number,name:string}',但還是一樣的 –

+0

@HongboMiao這裏是一樣的[SO問題](http://stackoverflow.com/q/33181936/2435473)沒有有用的答案 –

回答

7

選擇與* ngFor Angular2在使用對象時似乎無法正常工作。他們已在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); 
    } 
} 
+0

謝謝,一個不錯的訣竅! –

+0

對於數組,只需使用:this.list = this.list.map(Number); – Rookian

相關問題