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

Posted 2023-03-05

【中文标题】如何在 Angular 2 的 [(ngModel)] 中获取数字？ [复制]

【英文标题】：How to get number in [(ngModel)] in Angular 2? [duplicate]

【发布时间】：2016-05-31 05:13:29

【问题描述】：

如何在 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 仍然会变成一个字符串。

【问题讨论】：

如果你定义一个接口并使用它而不是num是数字类型的对象会发生什么？

@DavidL 我其实有一个interface Level num:number, name:string，但还是一样

@HongboMiao 这里是相同的SO question 没有有用的答案

【参考方案1】：

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

【参考方案2】：

Angular2 中带有 *ngFor 的 Select 在使用对象时似乎无法正常工作。他们已在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);
  

【讨论】：

谢谢，一个不错的技巧！

对于数组只需使用：this.list = this.list.map(Number);