Angular中ngModel绑定number字段返回字符串导致求和异常怎么办？

云上老周

2026-10-19

问题成因

TypeScript的类型声明仅在编译阶段生效，运行时会被擦除，不会实际限制变量的存储类型。
Angular中<input>元素如果未显式指定type="number"，使用[(ngModel)]双向绑定时，默认会将输入内容作为字符串类型存储，哪怕你在TS文件中给对应变量标注了number类型也不会生效。
调用parseFloat报错的原因是你在添加完条目后将cantidad/costoUnitario/subtotal设置为了null，parseFloat接收null作为参数时就会抛出类型不匹配的错误。

解决方案

第一步：给所有数值输入框添加type="number"属性，Angular会自动将绑定值转为number类型，修改后的输入框代码示例：

<mat-form-field>
  <input matInput type="number" placeholder="Cantidad [Kg]" [(ngModel)]="cantidad">
</mat-form-field>

<mat-form-field>
  <input matInput type="number" placeholder="Costo Unitario [Bs / Kg]" [(ngModel)]="costoUnitario">
</mat-form-field>

<mat-form-field>
  <input matInput type="number" placeholder="Subtotal [Bs]" [(ngModel)]="subtotal">
</mat-form-field>

第二步：如果需要兼容其他场景，可在agregar方法赋值时增加显式类型转换，兜底处理空值/异常值：

agregar(): void{
  // 先做类型转换，空值转0避免报错
  const cantidad = Number(this.cantidad) || 0;
  const costoUnitario = Number(this.costoUnitario) || 0;
  const subtotal = Number(this.subtotal) || 0;
  if (cantidad > 0 && costoUnitario > 0 && subtotal > 0){
    let compraDetalle = new CompraDetalle();
    compraDetalle.idMaterial = this.idMaterialSeleccionado;
    compraDetalle.cantidad = cantidad;
    compraDetalle.costoUnitario = costoUnitario;
    compraDetalle.subtotal = subtotal;
    this.compraDetalleList.push(compraDetalle);
    this.compraDetalleListTable = new MatTableDataSource(this.compraDetalleList);
    this.cantidad = null;
    this.costoUnitario = null;
    this.subtotal = null;
  }
}