Angular中如何精准显示用户输入的带小数预算数值？

默认的number管道会自动调整小数位数（比如默认最多保留3位、最少1位），导致你的输入和显示不一致。要实现输入几位小数就显示几位，整数则不补零，可以用以下两种方案：

方案一：动态设置DecimalPipe参数 #

在组件中添加方法，根据数值的小数位数生成对应格式字符串，再传给number管道：

1. 组件代码：

// 组件类中添加方法
getExactNumberFormat(value: number): string {
  if (!value) return '1.0-0';
  // 处理本地化逗号分隔的数值
  const numStr = new Intl.NumberFormat('fr-FR').format(value);
  const decimalParts = numStr.split(',');
  const decimalCount = decimalParts.length > 1 ? decimalParts[1].length : 0;
  // 返回格式：整数至少1位，小数固定为输入的位数
  return `1.${decimalCount}-${decimalCount}`;
}

2. 模板代码：

<td>{{deviline.montant_ht | number:getExactNumberFormat(deviline.montant_ht)}} {{deviline.devise}}</td>

方案二：自定义精确小数显示管道 #

如果需要更通用的解决方案，创建自定义管道处理显示逻辑：

1. 创建exact-decimal.pipe.ts文件：

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

@Pipe({ name: 'exactDecimal' })
export class ExactDecimalPipe implements PipeTransform {
  transform(value: number | string, locale = 'fr-FR'): string {
    if (value == null) return '';

    // 处理表单提交的带逗号的字符串输入
    let num: number;
    if (typeof value === 'string') {
      num = parseFloat(value.replace(',', '.'));
    } else {
      num = value;
    }

    // 整数直接返回字符串
    if (Number.isInteger(num)) {
      return num.toString();
    }

    // 获取原始小数位数
    const decimalLength = num.toString().split('.')[1].length;

    // 本地化格式化，固定小数位数
    return new Intl.NumberFormat(locale, {
      minimumFractionDigits: decimalLength,
      maximumFractionDigits: decimalLength
    }).format(num);
  }
}

2. 在模块中声明并导出管道：

import { NgModule } from '@angular/core';
import { ExactDecimalPipe } from './exact-decimal.pipe';

@NgModule({
  declarations: [ExactDecimalPipe],
  exports: [ExactDecimalPipe]
})
export class SharedModule {}

3. 模板中使用：

<td>{{deviline.montant_ht | exactDecimal}} {{deviline.devise}}</td>

注：如果你的应用使用其他本地化区域（如英语用点作小数分隔符），修改代码中的locale参数即可（例如改为'en-US'）。

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