Valiutos formatavimas naudojant kanalą Angular

Naudojant kanalą CurrencyPipe galima suformatuoti valiutos išvedimą. Pirmame kanalo parametre perduodamas valiutos kodas pagal ISO 4217 specifikaciją (pagal numatytuosius nustatymus USD). Antrame parametre nustatome valiutos atvaizdavimą. Jis gali priimti šias reikšmes: 'code' (valiutos kodas), 'symbol' (jos simbolis), 'symbol-narrow' (šalims, kurios turi kelis valiutos simbolius), 'string' (bet kokios eilutės išvedimui). Trečiame neprivalomame parametre galime nustatyti skaičiaus formatą, analogišką kanalui DecimalPipe. Ketvirtame neprivalomame parametre galima nurodyti naudojamos lokalės kodą:

html<div>{{ value | number : valiutos kodas : valiutos atvaizdavimas : skaičiaus formatas : lokalės kodas }}</div>

Pavyzdžiai

Išbandykime kanalo veikimą pavyzdžiais. Tam komponento klasėje nustatykime šią savybę salary, kurioje yra atlyginimas tam tikroje valiutoje:

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

Pavyzdys

Paverskime mūsų skaičių į valiutą:

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

Kodo vykdymo rezultatas:

html<div>$867.56</div>

Pavyzdys

Dabar nurodykime valiutos atvaizdavimą Rusijos rubliais:

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

Kodo vykdymo rezultatas:

html<div>RUB867.56</div>

Pavyzdys

Atvaizduokime šalia skaičiaus Rusijos rublio simbolį:

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

Kodo vykdymo rezultatas:

html<div>₽867.56</div>

Pavyzdys

Dabar gaukime skaičių su keturiais skaitmenimis trupmeninėje dalyje:

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

Kodo vykdymo rezultatas:

html<div>RUB867.5640</div>

Pavyzdys

Pridėkime prie valiutos atvaizdavimo šią eilutę:

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

Kodo vykdymo rezultatas:

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