Angular中如何通过管道实现数字取整并去除小数位？

这个需求其实用Angular内置的管道就能轻松搞定，不用额外写太多代码～

优先方案：使用Angular内置管道 #

Angular自带的DecimalPipe（在模板中可以用number作为别名）支持格式化数字，刚好能满足你四舍五入取整、隐藏小数位的需求。而且管道支持链式调用，你可以直接在现有自定义货币管道前加上这个内置管道：

<div> {{ myNumber | number:'1.0-0' | myCurrencyEuroPipe }} </div>

这里的格式字符串'1.0-0'含义拆解一下：

• 1：表示最少显示1位整数（即使数字是0也会正常显示）
• .：分隔整数和小数部分的标记
• 0-0：表示小数部分最少0位、最多0位，也就是完全不显示小数，并且自动对原数字做四舍五入处理，刚好能把2.74转换成3。

补充方案：自定义取整管道（适用于特殊取整逻辑） #

如果你的需求不是四舍五入，而是需要向下取整（比如2.74转成2）或者向上取整（比如2.1转成3），那内置管道就满足不了了，这时候可以自定义一个取整管道：

1. 先通过Angular CLI生成管道（也可以手动创建）：

ng generate pipe round

2. 在生成的round.pipe.ts里实现对应的取整逻辑，这里以四舍五入为例，你可以替换成Math.floor或Math.ceil来切换取整方式：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'round'
})
export class RoundPipe implements PipeTransform {
  transform(value: number): number {
    // 替换成Math.floor(value)实现向下取整，Math.ceil(value)实现向上取整
    return Math.round(value);
  }
}

3. 最后在模板里链式调用自定义取整管道和你的货币管道：

<div> {{ myNumber | round | myCurrencyEuroPipe }} </div>

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