Angular 4：如何在p标签中显示一位小数？Pipe使用方法

你可以直接用Angular自带的DecimalPipe（也就是number管道）来实现这个需求，不需要自定义Pipe，非常方便。

具体代码修改 #

把你的模板代码改成这样：

<p> {{ (total.one / total.two * 100) | number:'1.1-1' }} </p>

格式字符串解释 #

这里的'1.1-1'是DecimalPipe的格式参数，各部分含义：

• 第一个1：整数部分最少显示1位（如果是0的话也会正常显示）
• 中间的1：小数部分最少显示1位
• 最后的1：小数部分最多显示1位

这样不管计算结果是整数还是带有多位小数的数，都会统一显示为一位小数的格式，比如：

• 计算结果为75时，会显示75.0
• 计算结果为33.3333时，会显示33.3
• 计算结果为100.987时，会显示101.0（自动四舍五入）

额外注意事项 #

1. 确保模块导入CommonModule：DecimalPipe属于CommonModule，如果你的组件所在模块已经导入了BrowserModule（根模块）或者CommonModule（特性模块），那直接就能用，不用额外配置。
2. 处理除数为0的情况：如果total.two可能为0，建议先做判断避免出现NaN，比如：

<p> {{ total.two !== 0 ? (total.one / total.two * 100) | number:'1.1-1' : '0.0' }} </p>

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