Angular 10中如何将CurrencyPipe格式化的货币值显示在文本框内

问题原因 #

你之前将CurrencyPipe用在<p>标签的插值表达式中，格式化后的内容会直接渲染在p标签对应的位置（即文本框上方），不会自动关联到input元素的value属性，因此无法在文本框内显示。

实现方式 #

方式1：模板中直接绑定属性使用管道（最简单，无需额外组件逻辑） #

直接在input元素的[value]属性绑定中调用CurrencyPipe即可，和插值用法逻辑一致：

<!-- 注释掉之前的错误写法，该写法会把值渲染在p标签位置 -->
<!-- <p>{{Amount | currency}}</p> -->

<!-- 正确写法：将格式化后的值绑定到文本框value属性 -->
<input type="text" [value]="Amount | currency" />

如果需要自定义货币格式，可以给管道传参，例如指定人民币、固定保留2位小数：

<input type="text" [value]="Amount | currency:'CNY':'symbol':'1.2-2'" />

上述代码渲染后文本框内会显示类似¥12,345.67的格式。

方式2：组件类中调用管道转换（适合需要二次处理格式化值的场景） #

如果需要在组件逻辑中复用格式化后的值，可以在类中注入CurrencyPipe做转换，步骤如下：

1. 先在组件装饰器的providers中注册CurrencyPipe，再通过构造函数注入实例：

import { Component } from '@angular/core';
// 导入CurrencyPipe
import { CurrencyPipe } from '@angular/common';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  // 注册管道依赖
  providers: [CurrencyPipe]
})
export class DemoComponent {
  // 原始金额值
  Amount = 56789.45;
  // 格式化后用于文本框显示的值
  formattedAmount: string;

  // 注入CurrencyPipe实例
  constructor(private currencyPipe: CurrencyPipe) {
    // 调用transform方法做格式化，参数和模板中传参一致
    this.formattedAmount = this.currencyPipe.transform(this.Amount, 'USD', 'symbol', '1.2-2');
  }
}

2. 模板中直接绑定转换好的变量到文本框value：

<input type="text" [value]="formattedAmount" />

注意事项 #

• 如果使用[(ngModel)]双向绑定或者Angular响应式表单，不要直接在ngModel/formControl上套管道，会导致输入值更新异常，建议通过监听值变更事件，在组件类中完成格式化后再赋值给表单控件。
• CurrencyPipe的transform方法参数顺序和模板中传参顺序完全一致，依次为货币编码、是否显示货币符号、数字格式规则、本地化配置，可根据业务需求调整。
• 之前错误写法的渲染效果参考：
  

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