Angular 15中如何将API返回数字格式化为货币形式？

方法一：使用 Angular 内置 CurrencyPipe #

Angular 自带的 CurrencyPipe 可以快速处理货币格式化，适配巴西雷亚尔（BRL）场景：

1. 确保你的模块已导入 CommonModule（多数项目默认已导入，未导入则需在模块的 imports 数组中添加）
2. 修改 HTML 模板，直接通过管道格式化数字：

<thead class="fixed-top cabecalhoTabela">
            <mat-card-header>
              <ng-container matColumnDef="TotalInformado">
                <th mat-header-cell *matHeaderCellDef></th>
                <td mat-cell *matCellDef="let guia" class="text-center">
                  <b>Total Informado: {{ guia.TotalInformado | currency:'BRL':'symbol':'1.2-2' }}</b>
                </td>
              </ng-container>

              <ng-container matColumnDef="TotalCalculado">
                <th mat-header-cell *matHeaderCellDef></th>
                <td mat-cell *matCellDef="let guia" class="text-center">
                  <b>Total Calculado: {{ guia.TotalCalculado | currency:'BRL':'symbol':'1.2-2' }}</b>
                </td>
              </ng-container>

              <tr mat-header-row *matHeaderRowDef="colunasCabecalho" id="tr"></tr>
              <tr mat-row *matRowDef="let myRowData; columns: colunasCabecalho" ></tr>
            </mat-card-header>
   </thead>

参数说明：

• 'BRL'：指定货币代码为巴西雷亚尔
• 'symbol'：显示货币符号（即 R$）
• '1.2-2'：强制保留2位小数，整数部分至少1位

方法二：自定义管道（适配特殊格式需求） #

如果内置管道无法满足定制化要求，可创建自定义货币管道：

1. 生成管道文件：

ng generate pipe pipes/currency-br

2. 实现管道逻辑：

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

@Pipe({
  name: 'currencyBr'
})
export class CurrencyBrPipe implements PipeTransform {
  transform(value: number | string): string {
    // 处理字符串转数字的边界情况
    const num = typeof value === 'string' ? parseFloat(value) : value;
    if (isNaN(num)) return 'R$ 0,00';
    
    return new Intl.NumberFormat('pt-BR', {
      style: 'currency',
      currency: 'BRL'
    }).format(num);
  }
}

3. 在模块的 declarations 数组中声明该管道
4. 在模板中使用：

<b>Total Informado: {{ guia.TotalInformado | currencyBr }}</b>

注意事项 #

• 若 API 返回的是字符串类型数字，可通过 +guia.TotalInformado 转换为数值后再使用管道
• 如需多语言适配，可结合 Angular 国际化（i18n）配置调整区域规则

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