当前位置: 首页 > 知识库问答 >
问题:

如何在Angular 2中获得[(ngModel)]中的数字?[副本]

濮阳宁
2023-03-14

如何在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"}
];
 <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个答案

田成仁
2023-03-14

Angular2中带有*NGFOR的Select在使用对象时似乎不能正常工作。他们已经在github上公开了这个问题,但它仍然没有得到解决。

在这个问题得到解决之前,我会在select值发生变化时将字符串值更改为数字。

@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);
  }
}
 类似资料: