我在使用 Angular 的 CurrencyPipe 时遇到了问题。
我需要使用 CurrencyPipe 显示货币符号,但如果没有提供输入数字,我就无法使用它。
因为 CurrencyPipe 使用当前区域设置来获取货币符号,所以我认为输入数字应该是可选的。
当前行为:
{{ 1 | currency:'USD' }} --> $1
需要的行为:
{{ null | currency:'USD' }} --> $
你们当中有人知道默认管道是否可以实现这一点吗? 谢谢!!
我在使用 Angular 的 CurrencyPipe 时遇到了问题。
我需要使用 CurrencyPipe 显示货币符号,但如果没有提供输入数字,我就无法使用它。
因为 CurrencyPipe 使用当前区域设置来获取货币符号,所以我认为输入数字应该是可选的。
当前行为:
{{ 1 | currency:'USD' }} --> $1
需要的行为:
{{ null | currency:'USD' }} --> $
你们当中有人知道默认管道是否可以实现这一点吗? 谢谢!!
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];
}
}
您可以使用您的货币符号替换DEFAULT_CURRENCY_CODE,并添加一个空格。
app.module.ts > providers
providers: [ { provide: DEFAULT_CURRENCY_CODE, useValue: 'LKR ' } ],
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 | $:'€'}}
${{amount | number: '2.2'}}
amount=5
,则输出-->$5.00
如果 amount=null
,则输出-->$
我不知道你的模板是什么,但如果问题都在符号上,你可以使用 Material 类,在输入框前加上 matPrefix,并放置任何你需要的符号。
例如:
<span matPrefix>$ </span>
<input matInput
type="number"
min="0"
step="0.01"
[value]="price | currency:'':'':'1.2-2'">
input ? {{input | currency:'USD':true}} : $
?或者必须严格使用管道符号吗? - Chau Tran