Angular中使用DecimalPipe转换Number类型报错的技术问询

问题原因 #

你遇到的编译错误是因为RoomList接口里的rating字段用了包装类型Number，而Angular的DecimalPipe（number管道）只接受原始类型的number、string、null或undefined作为输入参数，包装类型Number不在允许的类型范围内，所以类型校验不通过。

解决方案 #

方案1：修正接口字段类型（推荐） #

直接把接口里的Number改成原始类型number，从根源解决类型不匹配问题：

// 修改前
interface RoomList {
  rating: Number;
}

// 修改后
interface RoomList {
  rating: number;
}

方案2：模板内转换包装对象为原始数值 #

如果无法修改接口（比如接口来自第三方依赖），可以在模板里把Number对象转成原始数值：

• 用+操作符快速转换：

  {{ +room.rating | number: '1.1-2' }}
  

• 调用valueOf()方法获取原始值：

  {{ room.rating.valueOf() | number: '1.1-2' }}
  

内容的提问来源于stack exchange，提问作者ToanTV13