Angular 4 Decimal Pipe千分位显示异常问题咨询

嘿，这个问题我之前帮同事处理过！不用自定义Pipe完全能搞定，咱们分两种方案来解决，看你更倾向哪种：

方案1：组件内写格式化方法（快速上手） #

Angular的Decimal Pipe在部分locale（比如你用的葡萄牙语巴西版pt-BR）里，默认规则是整数部分超过4位才显示千分位，4位的时候不显示。如果不想改全局配置，直接在组件里写个简单方法就行：

首先在你的组件类里添加这个方法：

formatAmount(amount: number): string {
  // 按照你的需求配置格式：保留2位小数，强制显示千分位
  return new Intl.NumberFormat('pt-BR', {
    minimumIntegerDigits: 1,
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
    // 关键设置：最小分组位数设为1，强制所有整数都显示千分位
    minimumGroupingDigits: 1
  }).format(amount);
}

然后在模板里替换原来的Decimal Pipe调用：

<td>USD {{ formatAmount(amount) }}</td>

这样输入7157.11123就会输出7.157,11，输入14314.23123输出14.314,23，完全符合你的需求。

方案2：修改全局locale配置（一劳永逸） #

如果你整个项目都需要这种千分位显示规则，那修改全局locale配置更合适，不用每个组件都写方法：

1. 在你的AppModule里导入相关依赖并修改locale配置：

import { LOCALE_ID, NgModule } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import localePt from '@angular/common/locales/pt';
import localePtExtra from '@angular/common/locales/extra/pt';

// 覆盖原locale的数字格式化规则，强制显示千分位
localePtExtra.numberFormat = {
  ...localePtExtra.numberFormat,
  minimumGroupingDigits: 1
};

// 注册修改后的locale
registerLocaleData(localePt, 'pt-BR', localePtExtra);

@NgModule({
  providers: [
    // 设置项目默认locale为修改后的pt-BR
    { provide: LOCALE_ID, useValue: 'pt-BR' }
  ]
})
export class AppModule { }

2. 然后模板里继续用原来的Decimal Pipe就行：

<td>USD {{amount| number: '1.2-2'}} </td>

这样整个项目的Decimal Pipe都会强制显示千分位，不管整数是4位还是更多。

内容的提问来源于stack exchange，提问作者Clovis Ignacio Ferreira