如何将数字输出为保留四位小数的百分比，修复Angular percent管道输出错误

问题原因 #

• Angular 内置的 percent 管道默认会先将输入值乘以100再转换为百分比格式，你输入的10会被换算为1000，这是输出结果不符合预期的核心原因。
• 你使用的格式参数 '4.1' 代表整数位最少保留4位、小数位仅保留1位，也和你要保留4位小数的需求不匹配。

修复方案 #

方案1：调整数值+适配percent管道参数 #

先把原数值除以100再传入管道，同时将格式参数改为 '1.4-4'（代表整数位最少1位，小数位固定保留4位），代码如下：

{{ overallCostDeviation / 100 | percent:'1.4-4' }}

如果需要用逗号作为小数分隔符（匹配你预期的10,0000 %格式），需要在项目根模块中配置对应地区标识，示例：

import { LOCALE_ID, NgModule } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import { localeFr } from '@angular/common/locales/fr';

registerLocaleData(localeFr);

@NgModule({
  // 其他配置省略
  providers: [{ provide: LOCALE_ID, useValue: 'fr' }]
})
export class AppModule { }

方案2：直接用number管道拼接百分号（更简便） #

不需要做数值换算，直接使用数字管道格式化后手动拼接百分号即可：

{{ overallCostDeviation | number:'1.4-4' }} %

同样按上述方案配置地区标识，即可得到逗号作为小数分隔符的效果。

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