Angular 角度2 CurrencyCurrencyPipe货币和数字之间的空间？

我注意到在Angular 2中有一个叫做CurrencyPipe的管道，它可以从一个数字中过滤出一些小数。这还添加了ISO货币指标，即“美元”或任何其他当地货币

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

USD123

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

下面是一些代码：

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

{{product.price}货币：'USD'}

这是不可能的，因为

CurrencyPipe

依赖于

Intl.NumberFormat

，并且没有此选项

也就是说，当

symbolDisplay

参数设置为

true

时，您可以切换到显示

$

而不是

USD

：

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

{{product.price}货币：'USD'：true}

这将显示：

$123

，这稍微好一点；-）如果这不适合您，您需要实现一个自定义管道来格式化您的数字

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

---

您可以使用一点巧妙的CSS解决此问题，使用，将类添加到span:

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

第一条规则确保您在块容器框中的价格（

：：第一个字母

对

内联

显示块有效），第二条规则在货币符号后添加一点额外的填充

---

你可以根据自己的喜好调整它…

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

{{product.currency}{{product.price |编号：'1.2-2'}}

或者在您的情况下：

---

USD{{产品.价格|编号：'1.2-2'}}

制作您自己的定制货币管道

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'}}

---

可以按如下方式替代管道。 确保您将此内容包括在模块中

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);
  }
}

角度v5及以上的更改

---

显示参数从

布尔值

更改为

字符串

显示字符串|布尔值

货币指示器的格式。以下其中一项：

• 代码：显示代码（如美元）
• 符号（默认）：显示符号（如$）
• 窄符号：对于货币有两个符号的地区，使用窄符号。例如，加拿大元已经贬值 符号CA$和符号窄$。如果区域设置没有狭窄的 符号，使用区域设置的标准符号
• 字符串：使用给定的字符串值，而不是代码或符号。例如，空字符串将抑制货币和符号
• 布尔值（在v5中标记为不推荐）：符号为true，代码为false
  可选。默认值为“符号”

文件：

---

不需要定制管道 您可以使用字符串格式覆盖货币和符号

字符串：使用给定的字符串值，而不是代码或符号。对于 例如，空字符串将抑制货币和符号

{{product.price}货币：'USD'}

{{data | currency:'GBP'}}

您可以改为使用

{{{data | currency:'GBP':}}

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

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->declarations中，在symbol部分添加空格也可以。见下文

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

{{amount |货币：“USD”：“USD”}

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

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

{{product.price}货币：'USD'+''}

你能展示一些代码吗？怎么样：

{{product.price | currency:'USD'}}

看起来不支持这个<代码>美元{{产品.价格{编号：'1.2-2'}}我明白了。那么有人认为这根管子有用吗？我看不出有人可能想在没有空格的情况下显示货币。。。我想我必须找到另一个解决方案。这只有在你不改变语言的情况下才有效。在德语中，货币跟在数字后面。但是，对于那些习惯于先有金额，然后在末尾有货币符号的文化呢？这应该是答案-如果您只担心将符号放在末尾或前面，您可以轻松地调整此功能。它只适用于符号，而不适用于整个单词，如USD。此asnwer的用户应该警惕任何不正常的货币用符号显示。例如，给定上述样式，CHF看起来像

C HF

。在货币字符串末尾添加空格无效。它会增加空间，但实际上会打印货币。

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

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