Formatering av valuta ved hjelp av en pipe i Angular
Med CurrencyPipe kan du
formatere valutaens utseende. I den første
parameteren til pipen sendes valutakoden
i henhold til ISO 4217 spesifikasjonen
(standard er USD). I den andre parameteren angir vi
viseformen for valutaen.
Den kan ha følgende verdier: 'code' (valutakode),
'symbol' (dens symbol),
'symbol-narrow' (for land som har
flere valutasymboler), 'string'
(for å vise en hvilken som helst streng). I den tredje
valgfrie parameteren kan vi angi
tallformatet, som ligner på DecimalPipe.
I den fjerde valgfrie parameteren kan
du angi koden for den brukte lokaliteten:
<div>{{ value | number : valutakode : visningsmodus for valuta : tallformat : lokalitetskode }}</div>
Eksempler
La oss prøve pipen med eksempler.
For å gjøre dette, la oss i komponentklassen definere
følgende egenskap salary, som inneholder
lønn i en bestemt valuta:
export class AppComponent {
salary: number = 867.564;
}
Eksempel
La oss konvertere tallet vårt til valuta:
<div>{{ salary | currency }}</div>
Resultat av koden:
<div>$867.56</div>
Eksempel
La oss nå angi visning av valuta i russiske rubler:
<div>{{ salary | currency:'RUB':'code' }}</div>
Resultat av koden:
<div>RUB867.56</div>
Eksempel
La oss vise symbolet for den russiske rubelen ved siden av tallet:
<div>{{ salary | currency:'RUB':'symbol-narrow' }}</div>
Resultat av koden:
<div>₽867.56</div>
Eksempel
La oss nå ha et tall med fire sifre i brøkdelen:
<div>{{ salary | currency:'RUB':'symbol':'2.4-5' }}</div>
Resultat av koden:
<div>RUB867.5640</div>
Eksempel
La oss legge til følgende streng til valutaens visning:
<div>{{ salary | currency:'RUB':'this is a new currency - ' }}</div>
Resultat av koden:
<div>this is a new currency - 867.56</div>
Praktiske oppgaver
Gitt tallet:
salary: number = 134.89;
Formater det på følgende måte:
'$134.89'
Gitt tallet:
salary: number = 134.89;
Formater det på følgende måte:
'€134.89'
Gitt tallet:
salary: number = 134.89;
Formater det på følgende måte:
'$134.890'
Gitt tallet:
salary: number = 134.89;
Formater det på følgende måte:
'$0,134.8900'
Gitt tallet:
salary: number = 134.89;
Formater det på følgende måte:
'this currency is changed 134.89'