Angular数字管道：如何按需保留小数位？整数不显示小数部分

这个需求确实没法用Angular原生的number管道直接实现，不过我们有两种简单的方案可以搞定，看你更倾向哪一种：

方案一：自定义管道（推荐，复用性强） #

如果你的项目里很多地方都需要这种格式化逻辑，自定义管道是最优雅的选择。

步骤1：生成管道 #

用Angular CLI快速创建一个管道：

ng generate pipe smart-number
# 或者简写 ng g p smart-number

步骤2：编写管道逻辑 #

打开生成的smart-number.pipe.ts文件，替换成下面的代码：

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

@Pipe({
  name: 'smartNumber'
})
export class SmartNumberPipe implements PipeTransform {

  transform(value: number | string, currency: string = 'zł'): string {
    // 先统一把输入转为数字类型
    const numericValue = typeof value === 'string' ? parseFloat(value) : value;

    // 处理无效数字的情况（比如null、undefined或者非数字字符串）
    if (isNaN(numericValue)) {
      return `0 ${currency}`; // 你可以根据需求修改默认值
    }

    // 判断是否为整数：是整数就直接输出，否则保留两位小数
    if (Number.isInteger(numericValue)) {
      return `${numericValue} ${currency}`;
    } else {
      // toFixed(2)会自动把64.9转为64.90，完美符合需求
      return `${numericValue.toFixed(2)} ${currency}`;
    }
  }

}

步骤3：在模板中使用 #

现在你可以像用原生管道一样使用它：

<p>{{ product.price | smartNumber }}</p>

如果需要切换货币符号，直接传参就行：

<p>{{ product.price | smartNumber: 'EUR' }}</p>

方案二：模板内条件判断（快速临时方案） #

如果只是个别地方需要这种格式，也可以直接在模板里写条件判断，不用新建管道：

<p>
  {{ Number.isInteger(product.price) ? product.price : (product.price | number: '1.2-2') }} zł
</p>

不过这种方式代码冗余，不适合多处复用。

两种方案都能实现你的需求：整数显示为60 zł，小数显示为64.90 zł，你可以根据项目情况选择~

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