Angular 5 - 货币管道答案

【问题标题】：Angular 5 - currencyPipeAngular 5 - 货币管道
【发布时间】：2018-07-18 01:45:17
【问题描述】：

我对 Angular 已经内置的 CurrencyPipe 有疑问。

我需要使用 CurrencyPipe 显示货币符号，但除非我提供输入数字，否则我无法使用它。

因为 CurrencyPipe 使用当前语言环境来获取货币符号，所以我认为输入数字可以是可选的。

当前行为：

{{ 1 | currency:'USD' }} --> $1

需要的行为：

{{ null | currency:'USD' }} --> $

你们中有人知道这是否可以使用默认管道吗？谢谢！！

【问题讨论】：

你不能：input ? {{input | currency:'USD':true}} : $ 吗？还是必须严格管？
如果货币只有美元，那就可以了，但还有更多，€，...这只是一个用例
那么使用默认的内置管道是不可能的。如果值为 null，则默认 CurrencyPipe 返回 null。您需要有一个自定义管道
看看this answer。

标签： angular pipe currency currency-pipe

【解决方案1】：

更新 Angular 8

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

@Pipe({ name: 'CustomeCurrency' })
export class CustomCurrencyPipe implements PipeTransform {

    constructor(private currencyPipe: CurrencyPipe) { }
    transform(value: any, currencyCode?: string, display?: string | boolean, digitsInfo?: string, locale?: string): string {
        if (value != null)
            return this.currencyPipe.transform(value, currencyCode, display, digitsInfo, locale);
        return this.currencyPipe.transform(0, currencyCode, display, locale).split('0.00')[0];
    }
}

试试这个简单的自定义货币管道

{{ null | CustomeCurrency }}</p>

import { Pipe, PipeTransform } from '@angular/core';
import { CurrencyPipe } from '@angular/common';
@Pipe({ name: 'CustomeCurrency' })
export class CustomCurrencyPipe implements PipeTransform {

constructor(private currencyPipe: CurrencyPipe) { }

transform(value: any, currency: string, symbol: boolean = false): string {
     if (value != null)
        return this.currencyPipe.transform(value, currency, symbol);
    return this.currencyPipe.transform(0, currency, symbol).split('0.00')[0];
 }
}

【讨论】：

是的，我做了类似的事情，传递一个 0 并从第一个数字到末尾获取一个子字符串。

【解决方案2】：

如果您收到错误消息 Angular v5 中的货币管道已更改。 symbolDisplay 选项（第三个参数）现在是字符串而不是布尔值。可接受的值是“code”、“symbol”或“symbol-narrow”。然后请参阅 Angular 文档以获取帮助，使用此页面上的代码示例来解决问题：https://angular.io/api/common/CurrencyPipe

【讨论】：

【解决方案3】：

Angular v5 中的货币管道已更改。 symbolDisplay 选项（第三个参数）现在是字符串而不是布尔值。可接受的值为“code”、“symbol”或“symbol-narrow”。

【讨论】：

【解决方案4】：

使用 Angular CurrencyPipe。

{{ money | currency:'USD':'symbol' }}

【讨论】：

答案看起来可以解决问题。你能提供更多信息吗？喜欢相同的参考页面，以便用户更好地理解？

【解决方案5】：

您可以将 DEFAULT_CURRENCY_CODE 替换为您的货币符号并添加一个空格。

app.module.ts > 提供者

providers: [ { provide: DEFAULT_CURRENCY_CODE, useValue: 'LKR ' } ],

【讨论】：

【解决方案6】：

我使用自定义管道（以符号作为参数）解决了问题，因为我需要控制何时以及如何显示符号。

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

@Injectable()
@Pipe({ name: '$' })
export class MoneyPipe implements PipeTransform {
  transform(value: number, symbol: string = null, decimalDelimiter: string = ",", thousandsDelimiter: string | null = "." ): any {
    if(!value) return symbol ? symbol + " -" : "";

    let roundValue = value.toFixed(Math.max(0, ~~2));
    let valueToReturn = roundValue.replace('.', decimalDelimiter);

    if(thousandsDelimiter) valueToReturn = this.setThousandsSign(valueToReturn, thousandsDelimiter);
    return symbol ? symbol + " " + valueToReturn : valueToReturn;
  }

  private setThousandsSign(value: string, delimiter: string): string {
    return value.split("").reverse().map((str, index) => {
      if(index <= 3) return str;

      return (index%3)===0 ? str+delimiter : str;
    }).reverse().join("");
  }
}

那是在 HTML 中。

{{order.price | $}}

使用自定义符号。

{{order.price | $:'€'}}

【讨论】：

【解决方案7】：

试试这个

${{amount | number: '2.2'}}

如果amount=5则输出-->$5.00

如果amount=null则输出-->$

【讨论】：