Angular 如何在右边显示货币符号

Question

我必须像这样显示欧元货币：583 €。

但使用此代码：

{{ price | currency:'EUR':true }}

我得到 €583，Angular 核心中是否有任何选项可以将符号向右移动？许多欧洲国家使用右边的符号（法国、德国、西班牙、意大利）。

Answer 1

老实说，我找不到任何内置的方法来做到这一点。因此创建了名为 split.

的自定义管道

工作演示：http://plnkr.co/edit/KX7hfaV2i7CX2VFobM8R?p=preview

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

@Pipe({name:'split'})
export class ShiftPosition implements PipeTransform {
  transform(items: any[], value: string): string {
      return items.substr(1)+' ' +items.substr(0,1);
  }
}


@Component({
  selector:"my-app",

  template:`
    <h2>Dashboard<h2>
     {{price|currency:'EUR':true|split:price}}
  `
})

export class AppComponent{      
  price=10;
}

Answer 2

从 Angular2 RC6 版本开始，您可以直接在您的应用程序模块（提供商）中设置默认语言环境：

import {NgModule, LOCALE_ID} from '@angular/core';

@NgModule({
  providers: [{
      provide: LOCALE_ID,
      useValue: 'de-DE' // 'de-DE' for Germany, 'fr-FR' for France ...
    },
  ]
})

之后，货币管道应该选择区域设置并将符号向右移动：

@Component({
  selector:"my-app",

  template:`
    <h2>Price:<h2>
     {{price|currency:'EUR':true}}
  `
})

Answer 3

Provide LOCALE_ID 不是解决方案，因为我的应用程序是英文的，但显示的是法语语言环境的货币。因此，如果我将 LOCALE_ID 设置为 fr-FR，我所有的日期都是法语，这是不可接受的。

所以我只选择 decimal pipe 然后在末尾添加符号。

<div>
    {{ document.totalTaxAmount | number:'1.2-2' }} EUR
</div>

这里的问题，如果没有定义数字，你最终只会得到符号。为了解决这个问题，我创建了一个非空管道：

@Pipe({
    name: 'notEmpty'
})
export class NotEmptyPipe implements PipeTransform {
    transform(value: any, replaceWith: any = ""): any {
        if (!value) {
            return replaceWith;
        }
        return value;
    }
}

并像这样使用它：

<div>
    {{ document.totalTaxAmount | number:'1.2-2' | notEmpty: '0' }} EUR
</div>

Answer 4

这样做：

{{price | currency:'EUR':true:'1.0-0'}}

不需要额外的管道，它使用默认的货币管道

Answer 5

这是有效的 (angular 6) html 侧：

{{ amount | currency: 'EUR':'symbol':undefined:'fr-FR' }}

在打字稿方面：

const number = 123456.789;
console.log(new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(number));

123.456,79 欧元

Answer 6

我正在寻找这个答案，当前版本 angular 可以定义本地化和默认货币代码的提供商。

像这样。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, LOCALE_ID, DEFAULT_CURRENCY_CODE } from '@angular/core';

import localePt from '@angular/common/locales/pt';
import { registerLocaleData } from '@angular/common';

// Register the localization
registerLocaleData(localePt, 'pt-BR');

@NgModule({
  declarations: [
    AppComponent,
    NotificationListComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
  ],
  providers: [
    {
      provide: LOCALE_ID,
      useValue: 'pt-BR'
     },
     {
       provide: DEFAULT_CURRENCY_CODE,
       useValue: 'BRL'
     },
    DataService,
    NotificationsService,
    GeoLocationService,
  ],
  entryComponents: components,
})

完成后，使用非常简单：

<div class="col-12" *ngIf="isContentInsurance.value">
     <h5 class="pull-left">Gst</h5>
     <span class="pull-right">-{{offers.contentInsurance | currency}}</span>
</div>

无需创建任何自定义管道或不同的自定义操作。

Answer 7

我只是不想使用 'fr' 本地，所以 :

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

    @Pipe({ name: 'myCurrency' })
    export class MyCurrencyPipe extends CurrencyPipe implements PipeTransform {
    
      transform(value: any, currencyCode?: string, display?: 'code' | 'symbol' | 'symbol-narrow' | string | boolean, digitsInfo?: string, locale?: string): string | null {
         let result = super.transform(value, currencyCode, display, digitsInfo, locale);
         if (result.charAt(0)==='₽' || result.charAt(0)==='$' ){
           result = result.substr(1)+' ' +result.substr(0,1);
         }else if(result.substr(0,3)==="TJS" || result.substr(0,3)==="RUB"){
           result = result.substr(3) +" "+result.substr(0,3)
         }
         if ( Number(value) >0 ){
           result = "+ "+ result
         }else{
           result = "- "+ result
         }
         return result;
      }

}

Answer 8

对于 Angular12，您应该在模块中导入它

import { registerLocaleData } from '@angular/common';
import localeDe from '@angular/common/locales/de';
import localeDeExtra from '@angular/common/locales/extra/de';

registerLocaleData(localeDe, 'de-DE', localeDeExtra);

并在您的提供商部分

{
      provide: LOCALE_ID,
      useValue: 'de-DE'
}

你可以这样使用

{{ price | currency:'EUR'}}

结果会是这样

    139,00 €

Answer 9

我创建了自己的管道来执行此操作，这也是通用的，如果 order.currency 中的值不同，它会自动更改货币，这与硬编码货币

不同

currency.pipe.ts

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

@Pipe({name:'OmsCurrency'})
export class OmsCurrency implements PipeTransform {
  constructor() { }
  transform(value: string, curr: string): string {
    try {
      if (curr === "" || curr === null) {
        return value
      }
      else {
        return value + ' ' + getCurrencySymbol(curr,"narrow");
      }
    } catch (error) {
      return value + ' ' + curr;
    }

  }
}

并且在 html 文件中刚刚添加了管道

<div class="col-1 h5 text-right">
    {{( item.unitPrice ? item.unitPrice : "0.00" ) |  OmsCurrency: order.currency }}
</div>

Answer 10

好吧，我自己解决了这个问题，如下所示

{{ product.price | currency: product.currency:"":".2-2" }} {{ orderInfo?.currency }}

顺便说一句，如果我以正常方式设置管道值，则输出将是

{{ product.price | currency: product.currency:"symbol":".2-2" }}

TRY 45,666.00

但是自定义管道输入后输出是

{{ product.price | currency: product.currency:"":".2-2" }} {{ orderInfo?.currency }}

45,666.00 TRY

Angular 如何在右边显示货币符号

How to display the currency symbol to the right in Angular

currency

pipe

euro

angular