Angular2 货币符号答案

【问题标题】：Angular2 currency symbolAngular2 货币符号
【发布时间】：2017-06-22 19:55:55
【问题描述】：

我在澳大利亚试图显示一些货币价值，我正在这样做

{{ portfolio.currentValue | currency : 'AUD' : true : '4.0' }}

结果我得到 1,300,000 澳元，我想显示 1,300,000 美元（无 A），而不必更改为“美元”。

有没有办法自定义我的货币符号？

【问题讨论】：

the docs 中没有提到，所以可能没有。不过，您可以为该行为子类化或编写自己的管道。

标签： angular pipe currency

【解决方案1】：

symbol-narrow 现在受支持，可以满足您的需求。

<!--output 'CA$0,001.35'-->
<p>B: {{b | currency:'CAD':'symbol':'4.2-2'}}</p>

<!--output '$0,001.35'-->
<p>B: {{b | currency:'CAD':'symbol-narrow':'4.2-2'}}</p>

https://angular.io/api/common/CurrencyPipe#usage-notes

也适用于澳元。

【讨论】：

【解决方案2】：

您可以将您的区域设置为澳大利亚，然后对于 AUD 货币，它只会显示一个 $。

在您的应用提供商中添加以下内容：

import { LOCALE_ID } from '@angular/core';
...
{ provide: LOCALE_ID, useValue: 'en-AU' }

那么下面会简单的显示一个 $ :

{{ portfolio.currentValue | currency : 'AUD' : true : '4.0' }}

【讨论】：

【解决方案3】：

这就是你想要的，它不仅可以处理澳元，还可以处理所有货币：

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

@Pipe({
    name: "myCurrencyPipe"
})
export class MyCurrencyPipe implements PipeTransform {

    constructor(private currencyPipe: CurrencyPipe) {}

    transform(value: any, currencyCode?: string, symbolDisplay?: boolean, digits?: string): string {

        let transformed = this.currencyPipe.transform(value, currencyCode, symbolDisplay, digits);
        let myTransformed:string[] = [];

        for (var i = 0; i < transformed.length; i++) {
            if(!this.isLetter(transformed[i])){
                myTransformed.push(transformed[i])
            }
        }

        return myTransformed.join("");
    }

    isLetter(c) {
        return c.toLowerCase() != c.toUpperCase();
    }
}

这样称呼它：{{ portfolio.currentValue | myCurrency : 'AUD' : true : '4.0' }}

首先它将通过调用this.currencyPipe.transform(value, currencyCode, symbolDisplay, digits); 来完成CurrencyPipe 所做的所有事情，然后通过删除其中的所有字母来修改输出。

app.module.ts：

@NgModule({
  declarations: [
    //..
    MyCurrencyPipe,
  ],
  providers: [
    //..
    CurrencyPipe
  ]
  //..
})

如果您只想创建一个处理CurrencyPipe 输出的管道：

 @Pipe({
    name: 'removeLettersFromStringPipe'
})
export class RemoveLettersFromStringPipe implements PipeTransform {
  transform(value: string){

    let myTransformed:string[] = [];

    for (var i = 0; i < value.length; i++) {
        if(!this.isLetter(value[i])){
            myTransformed.push(value[i])
        }
    }

    return myTransformed.join("");
  }

  isLetter(c) {
      return c.toLowerCase() != c.toUpperCase();
    }
}

将其用作{{ portfolio.currentValue | currency : 'AUD' : true : '4.0' | removeLettersFromStringPipe}}

【讨论】：

【解决方案4】：

正如其他答案中所建议的，我们为此使用了自定义管道，因为我也找不到自定义澳元符号的方法。

@Pipe({
   name: 'aud'
})
export class AudPipe implements PipeTransform {

transform(value: number): any {

    if (value === undefined || value === null) {
        return null;
    }

    let numberPipe = new DecimalPipe('en-AU');
    return '$' + numberPipe.transform(value, '1.2-2');
}

}

【讨论】：

【解决方案5】：

currencyPipe 不提供这种可能性。一种选择是编写自己的 custom pipe 以删除“A”并连接这些管道。

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

@Pipe({name: 'removeAFromString'})
export class RemoveAFromString implements PipeTransform {
  transform(value: number){
    return value.substring(1);

  }
}

现在连接管道：

{{ portfolio.currentValue | currency : 'AUD' : true : '4.0' | removeAFromString}}

【讨论】：

感谢您的意见，但如果不可能，我更喜欢that 之类的解决方案