En angular 2, ¿cómo mostrar un número como moneda redondeada con dos decimales?


Ejemplos:

  • 1.99 --> $1.99
  • 1.9 --> $1.90
  • 1 --> $1.00
  • 1.005 --> $1.01
  • 1.004 --> $1.00

Estoy usando {{num | currency:'USD':true}} pero no muestra trailing 0s.

Author: Ant, 2016-01-22

6 answers

Utilice este código. Aquí hay un ejemplo de trabajo http://plnkr.co/edit/xnN1HnJtTel6WA24GttR?p=preview {{num | currency:'USD':true:'1.2-2'}}

Explicación :
number_expression | número[:digitInfo]

Finalmente obtenemos un número decimal como texto. Encuentra la descripción.

Number_expression: Una expresión angular que dará salida a un número.

Número: Una palabra clave pipe que se usa con pipe operador.

DigitInfo: Define el formato numérico.

Ahora vamos a entender cómo usar digitInfo. La sintaxis de digitInfo es la siguiente.

{minIntegerDigits}.{minFractionDigits} - {maxFractionDigits}

Encuentra la descripción.

MinIntegerDigits : número Mínimo de dígitos enteros. El valor predeterminado es 1. (en nuestro caso 1)

MinFractionDigits: Número mínimo de dígitos de fracción. El valor predeterminado es 0. (en nuestro caso 2)

MaxFractionDigits: Número máximo de dígitos de fracción. El valor predeterminado es 3. (en nuestro caso 2)

 78
Author: Mubashir,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-30 19:35:56

Bueno, tienes la respuesta correcta, pero aún así creo que puedo elaborar más esta respuesta, así que publicarla como respuesta:

En primer lugar hay número de tuberías disponibles de la angular2 para utilizar en nuestro proyecto algunos de ellos se enumeran a continuación

CurrencyPipe , DatePipe, UpperCasePipe, LowerCasePipe, y PercentPipe y muchos más.

Aquí como su pregunta tiene un problema relacionado con la tubería de moneda. así que quiero explicar un poco más como otros respuesta.

CurrencyPipe:

Una tubería puede aceptar cualquier número de parámetros opcionales para ajustar su salida. Agregamos parámetros a una tubería siguiendo el nombre de la tubería con dos puntos (:) y luego el valor del parámetro (por ejemplo, moneda:'EUR'). Si nuestra tubería acepta múltiples parámetros, separamos los valores con dos puntos (por ejemplo, slice:1:5).

{{número | moneda:'your_type':true:'1.2-2'}}

Aquí...el primer parámetro es el tipo de moneda que es EUR,USD o cualquier cosa, Segundo el parámetro es true / false para symbolDisplay que es false byDefault. entonces el tercero es el límite de rango básicamente un límite de rango . Puede establecer una longitud mínima y máxima después del punto decimal y un número fijo (o dejarlo en blanco por defecto) para los lugares antes del punto decimal.

He encontrado algunos buenos tutoriales para las tuberías en el angular2 que estoy publicando aqui..

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

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

Espero que ayude y aclarar más acerca de las tuberías !! @Pardeep !!

 19
Author: Pardeep Jain,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-01-22 16:34:27

Está utilizando la tubería correcta. Solo necesita agregar la información de dígitos a la salida.

{{num | currency:'USD':true}} debería serlo...

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

Para referencia: 'USD' representa el tipo de moneda, true representa si mostrar el símbolo de moneda ($), y '1.2-2' representa la información del dígito.

La información del dígito es {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}.

minIntegerDigits es el número mínimo de dígitos enteros a usar y el valor predeterminado es 1.
minFractionDigits es el número mínimo de dígitos después de la fracción y el valor predeterminado es 0.
maxFractionDigits es el número máximo de dígitos después de la fracción y el valor predeterminado es 3.

La fuente para la información del dígito se puede encontrar aquí: https://angular.io/docs/ts/latest/api/common/index/DecimalPipe-pipe.html

 11
Author: Ant,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-02-03 18:23:06

Si, como yo, estás tratando de hacer esto en typescript / javascript en lugar de HTML, también puedes usar toLocaleString

Así que para convertir un número a una cadena de moneda:

  ppCurrency(number) {
   return number.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
  }
 7
Author: swhitman,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-25 00:27:13

Lo siguiente se convertirá con 2 dígitos decimales

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

Angular 2

{{num | currency:'USD':true:'1.2-2'}}
 5
Author: Santhy K,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-07-20 04:19:45
<input type="number" [(ngModel)]="myModel" (keyup)="onBlurMethod()">
<br>
<br> The formatted currency is :
<br> {{myModel | currency:'USD':true:'1.2-2' }}

Aquí está el ejemplo de trabajo.

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

 1
Author: Kumar Ranjan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-01-22 11:14:09