In angular 2, come visualizzare un numero come una valuta con due cifre decimali arrotondate?

Question

Esempi:

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

Sto usando {{num | currency:'USD':true}} ma non mostra gli ultimi 0 secondi.

Answer 1

di questo codice. Ecco un esempio di lavoro http://plnkr.co/edit/xnN1HnJtTel6WA24GttR?p=preview {{num | currency:'USD':true:'1.2-2'}}

Spiegazione:
number_expression | numero [: digitInfo]

Infine otteniamo un numero decimale come testo. Trova la descrizione

numero_espressione: Un'espressione angolare che restituirà un numero.

numero: Una parola chiave pipe utilizzata con l'operatore pipe.

digitInfo: Definisce il formato numero.

Ora capiremo come utilizzare digitInfo. La sintassi per digitInfo è la seguente.

{minIntegerDigits} {} - minFractionDigits. {} MaxFractionDigits

Trova la descrizione.

minIntegerDigits: Numero minimo di cifre intere. L'impostazione predefinita è 1. (nel nostro caso 1)

minFractionDigits: Numero minimo di cifre di frazione. L'impostazione predefinita è 0. (nel nostro caso 2)

maxFractionDigits: Numero massimo di cifre di frazione. L'impostazione predefinita è 3. (nel nostro caso 2)

Answer 2

Seguirà convertirsi con 2 cifre decimali

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

angolari 2

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

Answer 3

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

Ecco l'esempio di lavoro.

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

Answer 4

bene avete ottenuto la risposta corretta, ma ancora credo di poter elaborare più questa risposta così distacco come risposta:

Prima di tutto ci sono il numero di tubi a disposizione del angular2 da utilizzare in alcuni dei nostri progetti sono elencati di seguito

CurrencyPipe, DatePipe, UpperCasePipe, LowerCasePipe e PercentPipe e molti altri.

Qui come vostra domanda avete problemi relativi al tubo di valuta. quindi voglio spiegare un po 'di più come altre risposte.

CurrencyPipe:

Un tubo può accettare qualsiasi numero di parametri facoltativi per perfezionare la sua uscita. Aggiungiamo i parametri a una pipe seguendo il nome della pipe con due punti (:) e quindi il valore del parametro (ad es. Valuta: 'EUR'). Se la nostra pipe accetta più parametri, separiamo i valori con i due punti (ad esempio slice: 1: 5).

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

qui ... il primo parametro è il tipo di valuta che è EUR, USD o qualsiasi cosa, il secondo parametro è vero/falso per symbolDisplay che è falso di Default . quindi Terzo è il limite di portata in pratica un limite di intervallo. È possibile impostare una lunghezza minima e massima dopo il punto decimale e un numero fisso (o lasciarlo vuoto per impostazione predefinita) per i punti prima del punto decimale.

Ho trovato alcuni buoni tutorial per i tubi del angular2 che sto inviando qui ..

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

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

Speranza che aiuta e chiarire più su tubi !! @Pardeep !!

Answer 5

Si sta utilizzando la tubazione corretta. Hai solo bisogno di aggiungere le informazioni sulla cifra all'output.

{{num | currency:'USD':true}} dovrebbe essere ...

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

Per riferimento: 'USD' rappresenta il tipo di valuta, true rappresenta se visualizzare il simbolo di valuta ($), e rappresenta il '1.2-2' informazioni cifre.

Le informazioni sulla cifra sono {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}.

minIntegerDigits è il numero minimo di cifre interi da usare e default 1.
minFractionDigits è il numero minimo di cifre dopo frazione e default a 0.
maxFractionDigits è il numero massimo di cifre dopo frazione e default a 3 .

Fonte per le informazioni cifra può essere trovato qui: https://angular.io/docs/ts/latest/api/common/index/DecimalPipe-pipe.html

Answer 6

Se, come me, si sta cercando di fare questo nel dattiloscritto/javascript, piuttosto che HTML, è possibile anche utilizzare toLocaleString

Così per convertire un numero in una stringa di valuta:

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