Valutafomattering met behulp van 'n pyp in Angular

Met die CurrencyPipe-pyp kan jy die uitset van geldeenheid formateer. In die eerste parameter van die pyp word die geldeenheidkode volgens die ISO 4217-spesifikasie oorgedra (verstek is USD). In die tweede parameter spesifiseer ons die vertoning van die geldeenheid. Dit kan die volgende waardes aanneem: 'code' (kode van geldeenheid), 'symbol' (sy simbool), 'symbol-narrow' (vir lande wat verskeie geldeenheidsimbole het), 'string' (vir die vertoon van enige string). In die derde opsiesparameter kan ons die getalformaat spesifiseer, soortgelyk aan die DecimalPipe-pyp. In die vierde opsionele parameter kan jy die kode van die gebruikte lokaliteit spesifiseer:

html<div>{{ value | number : geldeenheidkode : geldeenheidvertoning : getalformaat : lokaliteitskode }}</div>

Voorbeelde

Laat ons die pyp se werking met voorbeelde toets. Om dit te doen, sal ons in die komponent se klas die volgende eienskap salary instel, wat 'n salaris in 'n sekere geldeenheid bevat:

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

Voorbeeld

Laat ons ons getal in geldeenheid omskep:

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

Resultaat van die kode-uitvoering:

html<div>$867.56</div>

Voorbeeld

Laat ons nou die geldeenheidvertoning spesifiseer in Russiese roebels:

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

Resultaat van die kode-uitvoering:

html<div>RUB867.56</div>

Voorbeeld

Laat ons die simbool van die Russiese roebel langs die getal vertoon:

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

Resultaat van die kode-uitvoering:

html<div>₽867.56</div>

Voorbeeld

Laat ons nou 'n getal met vier syfers in die breukdeel hê:

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

Resultaat van die kode-uitvoering:

html<div>RUB867.5640</div>

Voorbeeld

Laat ons die volgende string by die geldeenheidvertoning voeg:

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

Resultaat van die kode-uitvoering:

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