Formatering av valuta med hjälp av en pipe i Angular

Med hjälp av pipen CurrencyPipe kan valutaformatering göras. I den första parametern till pipen skickas valutakoden enligt ISO 4217 specifikationen (standard är USD). I den andra parametern ställer vi in valutavisning. Den kan ha följande värden: 'code' (valutakod), 'symbol' (dess symbol), 'symbol-narrow' (för länder som har flera valutasymboler), 'string' (för att visa valfri sträng). I den tredje valfria parametern kan vi ange talformat, liknande pipen DecimalPipe. I den fjärde valfria parametern kan locale-kod anges:

html<div>{{ value | currency : valutakod : valutavisning : talformat : locale-kod }}</div>

Exempel

Låt oss prova pipens funktion med exempel. För att göra detta, sätter vi följande egenskap salary i komponentklassen, som innehåller lön i en viss valuta:

app/app.component.tsexport class AppComponent {
  salary: number = 867.564;
}

Exempel

Låt oss omvandla vårt nummer till valuta:

app/app.component.html<div>{{ salary | currency }}</div>

Resultat av kodkörning:

html<div>$867.56</div>

Exempel

Låt oss nu ange valutavisning i ryska rubel:

app/app.component.html<div>{{ salary | currency:'RUB':'code' }}</div>

Resultat av kodkörning:

html<div>RUB867.56</div>

Exempel

Låt oss visa symbolen för rysk rubel bredvid numret:

app/app.component.html<div>{{ salary | currency:'RUB':'symbol-narrow' }}</div>

Resultat av kodkörning:

html<div>₽867.56</div>

Exempel

Låt oss nu göra ett nummer med fyra siffror i bråkdelen:

app/app.component.html<div>{{ salary | currency:'RUB':'symbol':'2.4-5' }}</div>

Resultat av kodkörning:

html<div>RUB867.5640</div>

Exempel

Låt oss lägga till följande sträng till valutavisningen:

app/app.component.html<div>{{ salary | currency:'RUB':'this is a new currency - ' }}</div>

Resultat av kodkörning:

html<div>this is a new currency - 867.56</div>