web-dev-qa-db-fra.com

Comment afficher le symbole monétaire à droite dans Angular

Je dois afficher l'euro comme ceci: 583 €.

Mais avec ce code:

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

Je reçois €583, y a-t-il une option dans le noyau angulaire pour déplacer le symbole à droite? De nombreux pays européens utilisent le symbole à droite (France, Allemagne, Espagne, Italie).

angularpipecurrencyeuro
17
Ekaitz Hernandez Troyas

Depuis la version Angular2 RC6, vous pouvez définir les paramètres régionaux par défaut directement dans votre module d'application (fournisseurs):

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

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

Ensuite, le tuyau de devise devrait prendre les paramètres régionaux et déplacer le symbole à droite:

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

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

Le format du canal monétaire est contrôlé par les règles de localisation actuelles . Voir aussi Using Pipes :

Les canaux Date et devise ont besoin de l’API d’internationalisation ECMAScript. Safari et les autres navigateurs plus anciens ne le prennent pas en charge. Nous pouvons ajouter un support avec un polyfill.

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

Sous le capot, CurrencyPipedélègue le formatage ànew Intl.NumberFormat(locale, options).format(num);.

Intl.NumberFormat Utilisation des options :

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

En d'autres termes, le formatage des monnaies avec CurrencyPipe implique:

  1. Utiliser les paramètres régionaux appropriés. Voir ceci sur la façon de remplacer les paramètres régionaux par défaut , mais cela ne devrait être nécessaire que pour les tests, car les utilisateurs devraient avoir les paramètres régionaux corrects définis dans les paramètres du système d'exploitation.
  2. Et en utilisant le polyfill pour les anciens navigateurs.
8
Maxim Egorushkin

Cela fonctionne (angle 6) Sur le côté HTML:

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

et du côté de TypeScript:

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

123.456,79 €

5
user1767316

Fournir LOCALE_ID n'était pas une solution car mon application est en anglais mais affiche la devise avec les paramètres régionaux français. Donc, si je règle LOCALE_ID sur fr-FR, toutes mes dates sont en français, ce qui n’est pas acceptable. 

Donc, je choisis simplement le tuyau décimal puis j'ajoute le symbole à la fin. 

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

Le problème ici, si le nombre n'est pas défini, vous ne vous retrouverez qu'avec le symbole. Pour résoudre ce problème, j'ai créé un tuyau non vide:

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

Et utilisez-le comme ceci:

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

Honnêtement, je ne pouvais trouver aucun moyen intégré de le faire . Un canal personnalisé ainsi créé, appelé split.

démo de travail: 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

Fais-le comme ça:

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

Pas besoin de tubes supplémentaires, il utilise le canal de devise par défaut

0
kabus