Question

我注意到Angular 2中有一个名为CurrencyPipe的管道，它会从一个数字中过滤掉一些小数。这也增加了ISO货币指标，即“美元”或任何其他本地货币。

我的问题是输出显示如下：

USD123

美元和123之间没有空间，这真的是首选行为吗？我是否必须为此编写自己的管道，或者我可以做些什么来添加空间？

以下是一些代码：

<span>{{ product.price | currency:'USD' }}</span>

Answer 1

这是不可能的，因为CurrencyPipe依赖Intl.NumberFormat而且没有选项。

也就是说，如果$参数设置为USD，您可以切换为显示symbolDisplay而不是true：

<span>{{ product.price | currency:'USD':true }}</span>

这将显示：$123哪个更好;-)如果这不适合你，你需要实现一个自定义管道来格式化你的号码......

有关详细信息，请参阅以下链接：

Answer 2

您可以使用first-letter pseudo element使用一些聪明的CSS解决此问题，在您的范围中添加一个类：

<span class="price">{{ product.price | currency:'USD':true }}</span>

并在你的CSS中添加：

.price {
  display: inline-block;
}

.price::first-letter {
  padding-right: 0.3em;
}

第一条规则确保您在块容器框中的价格（::first-letter对inline显示块有效），第二条规则在货币符号后添加一些额外的填充。

你可以根据自己的喜好调整一下......

Answer 3

你真的需要使用货币管吗？您始终可以将货币与金额分开：

<span class="price">{{ product.currency }} {{ product.price|number:'1.2-2'}}</span>

或在你的情况下：

<span class="price">USD {{ product.price|number:'1.2-2'}}</span>

Answer 4

制作自己的自定义货币管道。

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

@Pipe({ name: 'myCurrency' })
export class MyCurrencyPipe implements PipeTransform {
    transform(num: any, currencyCode: string, showSymbol: boolean, digits: string): any {
        let value = new CurrencyPipe(navigator.language).transform(num, currencyCode, showSymbol, digits);
        let firstDigit = value.match(/\d/);
        let symbol = value.slice(0, firstDigit.index);
        let amount = value.slice(firstDigit.index);   
        return symbol + " " + amount;
    }
}

并使用它 HTML 喜欢

{{amount | myCurrency: currencyCode :true:'1.0-2'}}

Answer 5

您可以按如下方式覆盖管道。确保将其包含在模块中

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


@Pipe({name: 'currency'})
export class MyCurrencyPipe extends CurrencyPipe implements PipeTransform {
  transform(value: any, currencyCode: string, symbolDisplay: boolean, digits: string): string {
    const currencyFormat = super.transform(value, currencyCode, symbolDisplay, digits);
    const firstDigit = currencyFormat.search(/\d/);
    return currencyFormat.substring(0, firstDigit) + ' ' + currencyFormat.substr(firstDigit);
  }
}

Answer 6

Angular v5及更高版本的更改

DISPLAY 参数从boolean更改为string

显示字符串|布尔

货币指示器的格式。以下之一：


代码：显示代码（例如USD）。

符号（默认）：显示符号（例如$）。

symbol-narrow：将窄符号用于具有两个货币符号的语言环境。例如，加元CAD有   符号CA $和符号窄$。如果语言环境不狭窄   符号，将标准符号用于语言环境。

字符串：使用给定的字符串值代替代码或符号。例如，一个空字符串将取消显示货币和符号。


布尔值（在v5中已弃用）：对于符号为true，对于代码为false。

可选。默认值为“符号”。

文档：https://angular.io/api/common/CurrencyPipe

不需要自定义管道

您可以使用字符串格式覆盖货币和符号。

字符串：使用给定的字符串值代替代码或符号。对于例如，一个空字符串将取消显示货币和符号。

<span>{{ product.price | currency:'USD ' }}</span>

Answer 7

(?,5,29)，您可以代替{{data|currency:'GBP'}}

Answer 8

创建一个新管道，以接收货币作为输入。

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

@Pipe({
    name: 'space'
})
export class SpacePipe implements PipeTransform {
   transform(value: any, args?: any): any {
       console.log(value.substring(0, 1) + ' ' + value.substring( 1));
       return value.substring(0, 1) + ' ' + value.substring( 1);
   }
}

之后，您可以这样称呼他们

{{discount | currency: 'EUR' | space}}

不要忘记将其包含在@NgModule->声明中

Answer 9

在符号部分添加空格也将起作用。见下文。

<strong class="d-inline-block">{{ amount | currency:"USD":"USD " }}</strong>

Answer 10

只需连接空格，如下面的代码所示。它对我有用。顺便说一下，我正在使用 Angular 6。

<span>{{ product.price | currency:'USD' + ' ' }}</span>

Angular 2 CurrencyPipe货币和数字之间的空间？

10 个答案:

Angular v5及更高版本的更改

不需要自定义管道