我注意到在 Angular 2 中有一个名为 CurrencyPipe 的管道，它可以过滤数字中的一些小数。这也添加了 ISO 货币指标，即“美元”或任何其他当地货币。
我的问题是输出是这样显示的：
USD123
美元和 123 之间没有空格，这真的是首选行为吗？我是否必须为此编写自己的管道，或者我可以做些什么来添加空间？
这里有一些代码：
<span>{{ product.price | currency:'USD' }}</span>
【问题讨论】：
<span>{{ product.price | currency:'USD ' }}</span>
<span>USD {{ product.price|number:'1.2-2'}}</span>
标签： angular
您可以使用first-letter pseudo element 使用一些巧妙的 CSS 来解决这个问题，在您的 span 中添加一个类：
<span class="price">{{ product.price | currency:'USD':true }}</span>
并在您的 css 中添加：
.price {
display: inline-block;
}
.price::first-letter {
padding-right: 0.3em;
}
第一条规则确保您在块容器框中的价格（::first-letter 确实适用于 inline 显示块），第二条规则在货币符号之后添加了一些额外的填充。
您可以根据自己的喜好进行调整...
【讨论】：
C HF。
这是不可能的，因为 CurrencyPipe 依赖于 Intl.NumberFormat 并且没有此选项。
也就是说，您可以切换到显示 $ 而不是 USD，并将 symbolDisplay 参数设置为 true：
<span>{{ product.price | currency:'USD':true }}</span>
这将显示：$123 更好一点 ;-) 如果这不适合您，您需要实现一个自定义管道来格式化您的号码...
查看这些链接了解更多详情：
【讨论】：
你真的需要使用货币管道吗？您可以随时将货币与金额分开：
<span class="price">{{ product.currency }} {{ product.price|number:'1.2-2'}}</span>
或者在你的情况下：
<span class="price">USD {{ product.price|number:'1.2-2'}}</span>
【讨论】：
制作您自己的自定义货币管道。
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);
}
}
【讨论】：
DISPLAY参数由boolean改为string
显示字符串 |布尔值
货币指标的格式。以下之一：
- code：显示代码（如USD）。
- symbol(default)：显示符号（如$）。
- symbol-narrow：对有两个货币符号的语言环境使用窄符号。例如，加元 CAD 有 符号 CA$ 和符号窄的 $。如果语言环境没有窄 符号，使用语言环境的标准符号。
- 字符串：使用给定的字符串值而不是代码或符号。例如，空字符串将隐藏货币和符号。
布尔值（在 v5 中标记为弃用）：对于符号为 true，对于代码为 false。
可选。默认为“符号”。
文档：https://angular.io/api/common/CurrencyPipe
您可以用字符串格式覆盖货币和符号。
字符串：使用给定的字符串值而不是代码或符号。为了 例如，空字符串将隐藏货币和符号。
<span>{{ product.price | currency:'USD ' }}</span>
【讨论】：
创建一个接收货币作为输入的新管道。
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 -> 声明中
【讨论】：
{{data|currency:'GBP'}}你可以用{{data|currency:'GBP':}}代替
【讨论】：
在符号部分添加一个空格也可以。见下文。
<strong class="d-inline-block">{{ amount | currency:"USD":"USD " }}</strong>
【讨论】：
只需连接空格，如下面的代码所示。它对我有用。顺便说一下，我正在使用 Angular 6。
<span>{{ product.price | currency:'USD' + ' ' }}</span>
【讨论】：
这里有一些非常复杂的解决方案，当我们可以通过使用角管道的简单解决方法来解决这个问题时。假设我想显示USD 123。我们可以这样做的方法是：
<div>
{{0 | currency:'USD':'code' | slice:0:3}} {{<actualAmount> | number:'1.2-2'}}
</div>
我在这里所做的是将金额设置为 0，然后从中切出货币代码，然后我们可以将实际金额添加为正常数字。
类似地使用符号$ 123，我们可以这样做：
<div>
{{0 | currency:'USD':'symbol' | slice:0:1}} {{<actualAmount> | number:'1.2-2'}}
</div>
【讨论】：