javascript - Angular 2 路数字绑定(bind)从输入转换为字符串

Question

每当我在以 2 方式绑定(bind)到我的对象的输入中输入数字时，该值都会转换为字符串。
如何强制它或将其转换为数字？

看起来应该很简单，但我一直在努力寻找一个优雅的解决方案。

我看到了使用函数来转换它的解决方案，但我不知道这对于 2 路数据绑定(bind)如何工作。
convert string to number angular 2 one way binding

          <div class="row"> 
            <mat-form-field class="custom-control">
              <input type="number" matInput class="custom-control" [(ngModel)]="mpv.baseFare" required placeholder="Base Fare">
            </mat-form-field>
          </div>
          <div class="row"> 
            <mat-form-field class="custom-control">
              <input type="number" matInput class="custom-control" [(ngModel)]="mpv.mileageRate" required placeholder="Mileage Rate">
            </mat-form-field>
          </div>

mpv 是 VehicleType 类的对象 我的 VehicleType 类设置如下。我猜数字类型被完全忽略，因为它是在运行时所以只是非类型化的 javascript。

 export class VehicleType {
    baseFare: number;
    mileageRate: number;
}

更新 - 当前的黑客解决方案:

onSave(vehicleType: VehicleType) {
// Hack to convert string to number
vehicleType.bags = +vehicleType.bags;
vehicleType.baseFare = +vehicleType.baseFare;
vehicleType.mileageRate = +vehicleType.mileageRate;
vehicleType.passengers = +vehicleType.passengers;
this.vehicleTypeService.updateVehicleType(vehicleType.id, vehicleType).subscribe(result => {

Answer 1

事实证明，matInput 上的属性顺序是重要的。此问题不会发生在标准输入上，只有 matInput 上。

不起作用:

 <input type="number" matInput class="custom-control" [(ngModel)]="mpv.baseFare" required placeholder="Base Fare">

作品:

 <input matInput type="number" class="custom-control" [(ngModel)]="mpv.baseFare" required placeholder="Base Fare">