web-dev-qa-db-fra.com

Dans angular 2, comment afficher un nombre sous forme de monnaie à deux décimales arrondies?

Exemples:

  • 1,99 -> 1,99 $
  • 1,9 -> 1,90 $
  • 1 -> 1,00 $
  • 1,005 -> 1,01 $
  • 1,004 -> 1,00 $

J'utilise {{num | currency:'USD':true}} mais il ne montre pas les 0 finaux.

filterroundingangularcurrency
33
g.sui

Utilisez ce code. Voici un exemple de travail http://plnkr.co/edit/xnN1HnJtTel6WA24GttR?p=preview{{num | currency:'USD':true:'1.2-2'}}

Explication:
expression_numérique | numéro [: digitInfo]

Enfin, nous obtenons un nombre décimal sous forme de texte. Trouvez la description.

number_expression: Une angular qui donnera un nombre en sortie.

nombre: Mot-clé de canal utilisé avec l'opérateur de canal.

digitInfo: Définit le format numérique.

Nous allons maintenant comprendre comment utiliser digitInfo. La syntaxe de digitInfo est la suivante.

{minIntegerDigits}. {minFractionDigits} - {maxFractionDigits}

Trouvez la description.

minIntegerDigits: Nombre minimal de chiffres entiers. La valeur par défaut est 1. (dans notre cas 1)

minFractionDigits: Nombre minimal de chiffres de fraction. La valeur par défaut est 0. (dans notre cas 2)

maxFractionDigits: Nombre maximal de chiffres de fraction. La valeur par défaut est 3. (dans notre cas 2)

82
Mubashir

eh bien, vous avez la bonne réponse mais je pense que je peux élaborer davantage cette réponse afin de l'afficher en tant que réponse:

Tout d’abord, il existe un certain nombre de tuyaux disponibles de l’angle2 à utiliser dans notre projet.

CurrencyPipe, DatePipe, UpperCasePipe, LowerCasePipe et PercentPipe et bien d'autres.

Ici en tant que votre question vous avez le problème lié au tuyau de devise. donc je veux expliquer un peu plus que d'autres réponses.

CurrencyPipe:

Un canal peut accepter un nombre quelconque de paramètres facultatifs pour affiner sa sortie. Nous ajoutons des paramètres à un canal en suivant le nom du canal avec un signe deux-points (:), puis la valeur du paramètre (par exemple, la devise: 'EUR'). Si notre canal accepte plusieurs paramètres, nous séparons les valeurs par des deux points (par exemple, slice: 1: 5).

{{nombre | currency: 'your_type': true: '1.2-2'}}

ici ... le premier paramètre est le type de devise qui est soit EUR, USD ou quoi que ce soit, le second paramètre est vrai/faux pour le symbolDisplay qui est faux par défaut. La troisième limite est la limite de plage, qui est essentiellement une limite de plage. Vous pouvez définir une longueur minimale et maximale après le point décimal et un nombre fixe (ou laissez-le vide pour les valeurs par défaut) pour les emplacements situés avant le point décimal.

J'ai trouvé de bons tutoriels pour les pipes dans le angular2 que je poste ici ..

http://voidcanvas.com/angular-2-pipes-filters/

https://angular.io/docs/ts/latest/guide/pipes.html

J'espère que ça aide et clarifie plus sur les pipes !! @Pardeep !!

19
Pardeep Jain

Vous utilisez le bon tuyau. Il vous suffit d'ajouter les informations sur le chiffre à la sortie.

{{num | currency:'USD':true}} devrait être...

{{num | currency:'USD':true:'1.2-2'}}

Pour référence: 'USD' représente le type de devise, true indique si le symbole monétaire ($) doit être affiché et '1.2-2' représente l'info du chiffre.

L'information du chiffre est {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}.

minIntegerDigits est le nombre minimum de chiffres entiers à utiliser et par défaut à 1.
minFractionDigits est le nombre minimum de chiffres après la fraction et vaut 0 par défaut.
maxFractionDigits est le nombre maximum de chiffres après la fraction et est fixé par défaut à 3.

La source des informations sur les chiffres peut être trouvée ici: https://angular.io/docs/ts/latest/api/common/index/DecimalPipe-pipe.html

11
My Stack Overfloweth

Si, comme moi, vous essayez de le faire dans TypeScript/javascript plutôt que HTML, vous pouvez également utiliser toLocaleString

Donc, pour convertir un nombre en chaîne monétaire:

  ppCurrency(number) {
   return number.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
  }
8
swhitman

La suite va convertir avec 2 chiffres décimaux

{{num | currency : '$' : 2}}

angulaire 2

{{num | currency:'USD':true:'1.2-2'}}
5
Santhy K
<input type="number" [(ngModel)]="myModel" (keyup)="onBlurMethod()">
<br>
<br> The formatted currency is :
<br> {{myModel | currency:'USD':true:'1.2-2' }}

Voici l'exemple de travail.

http://plnkr.co/edit/pSK8p7u3oo4WsAB9aFBS?p=preview

1
Kumar Ranjan