web-dev-qa-db-ja.com

Angularの右側に通貨記号を表示する方法

このようなユーロ通貨を表示する必要があります：583 €。

しかし、このコードでは：

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

€583、Angular coreでシンボルを右に移動するオプションはありますか？多くのヨーロッパ諸国では​​、右側のシンボルを使用しています（フランス、ドイツ、スペイン、イタリア）。

angularpipecurrencyeuro
18
Ekaitz Hernandez Troyas

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}}
  `
})
27
benedikt

通貨パイプの形式は 現在のロケール規則 で制御されます。 パイプの使用 も参照してください。

日付および通貨パイプには、ECMAScript国際化APIが必要です。 Safariやその他の古いブラウザーはサポートしていません。ポリフィルでサポートを追加できます。

_<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>
_

内部ではCurrencyPipeデリゲートのフォーマットnew Intl.NumberFormat(locale, options).format(num);。

オプションを使用したIntl.NumberFormat ：

_var number = 123456.789;

// request a currency format
console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number));
// → 123.456,79 €

// the Japanese yen doesn't use a minor unit
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(number));
// → ￥123,457
_

言い換えると、CurrencyPipeで通貨をフォーマットするには、次のものが含まれます。

  1. 正しいロケールを使用します。 デフォルトロケールの置き換え方法 を参照してください。ただし、これは、ユーザーがOS設定で正しいロケールを設定していることが期待されるため、テストのみに必要です。
  2. そして、古いブラウザにポリフィルを使用します。
8
Maxim Egorushkin

これはhtml側で機能しています（角度6）：

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

そしてTypeScript側で：

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

123.456,79€

8
user1767316

正直なところ、私はそれを行うための組み込みの方法を見つけることができませんでした。 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;
}
2
micronyks

私のアプリケーションは英語ですが、フランス語のロケールで通貨が表示されるため、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>
1
Robouste

次のようにします：

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

追加のパイプは不要です。デフォルトの通貨パイプを使用します

0
kabus