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).
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}}
`
})
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, CurrencyPipe
dé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:
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 €
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>
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;
}
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