Angular中如何将整数价格转换为指定格式的小数？

你的问题核心是数值单位转换：当前price存储的是分（比如900分=9欧元），直接用number管道处理整数只会给整数添加小数位，不会改变数值量级。

步骤1：转换数值量级后再格式化 #

把模板中的价格处理代码修改为：

<li class="padding">{{product.price / 100 | number:'1.2-2'}} €</li>

• product.price / 100：将分转换为欧元单位（900分 → 9欧元，950分 → 9.5欧元）
• number:'1.2-2'：指定格式为至少1位整数，固定2位小数，确保结果始终显示两位小数。

步骤2：配置小数分隔符为逗号（适配法语区等场景） #

如果项目默认语言不是法语，需要配置Angular本地化设置，让number管道使用逗号作为小数分隔符：

1. 在app.module.ts中导入本地化依赖：

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

// 注册法语本地化数据
registerLocaleData(localeFr);

2. 在模块的providers中设置默认locale：

@NgModule({
  // ...其他模块配置
  providers: [
    { provide: LOCALE_ID, useValue: 'fr-FR' }
  ]
})
export class AppModule { }

完成以上配置后，900分就会显示为9,00 €，950分显示为9,50 €，完全符合需求。

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