logo标签列表

Angular 5 - 货币管道

angularpipecurrencycurrency-pipe
28

我在使用 Angular 的 CurrencyPipe 时遇到了问题。

我需要使用 CurrencyPipe 显示货币符号，但如果没有提供输入数字，我就无法使用它。

因为 CurrencyPipe 使用当前区域设置来获取货币符号，所以我认为输入数字应该是可选的。

当前行为：

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

需要的行为：

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

你们当中有人知道默认管道是否可以实现这一点吗？ 谢谢！！

1
你不能这样做吗：input ? {{input | currency:'USD':true}} : $？或者必须严格使用管道符号吗？ - Chau Tran
如果货币只有美元，那么这个方法可以奏效，但是还有其他的货币，如欧元... 这只是一个使用案例。 - David Casanellas
1
那么默认的内置管道就无法实现了。如果值为null，则默认的CurrencyPipe会返回null。您需要使用自定义管道。 - Chau Tran
1
请查看这个答案。 - ConnorsFan
8个回答
17

更新 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并从第一个数字到结尾获取子字符串。 - David Casanellas
7
如果你看到错误信息“货币管道在Angular v5中已更改。symbolDisplay选项（第三个参数）现在是字符串，而不是布尔值。接受的值为“code”、“symbol”或“symbol-narrow”。”请查阅Angular文档以获取帮助，并使用此页面上的代码示例来解决问题：https://angular.io/api/common/CurrencyPipe。
7
使用Angular的 CurrencyPipe。
{{ money | currency:'USD':'symbol' }}
2
答案似乎解决了问题。你能否提供更多信息？比如参考页面，让用户更好地理解？ - shubham
6
Angular v5 中货币管道已经改变。symbolDisplay 选项（第三个参数）现在是一个字符串而不是布尔值。可接受的值为 "code"、"symbol" 或 "symbol-narrow"。
4

您可以使用您的货币符号替换DEFAULT_CURRENCY_CODE，并添加一个空格。

app.module.ts > providers

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

1
我用自定义管道解决了这个问题（使用符号作为参数），因为我需要控制何时以及如何显示符号。
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 | $:'€'}}
1
尝试这个。
${{amount | number: '2.2'}}

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

我不知道你的模板是什么，但如果问题都在符号上，你可以使用 Material 类，在输入框前加上 matPrefix，并放置任何你需要的符号。

例如：

<span matPrefix>$&nbsp;</span>
<input matInput 
       type="number"
       min="0"
       step="0.01"
       [value]="price | currency:'':'':'1.2-2'">
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接