Skaičių formatavimas naudojant kanalus Angular

Naudojant kanalą DecimalPipe galima formatuoti skaičius. Pirmame parametre kanalo nurodome minimalų skaitmenų skaičių sveikojoje dalyje. Antrame parametre nurodome minimalų skaitmenų skaičių trupmeninėje dalyje. Trečiame neprivalomame parametre nustatome maksimalų skaitmenų skaičių trupmeninėje dalyje.

Nepaisant to, kad mūsų kanalas vadinamas DecimalPipe, norėdami jį iškviesti, rašome taip: number.

Išbandykime praktiškai. Komponento klasėje nustatykime šį skaičių:

export class AppComponent {
	num: number = 18;
}

Pavyzdys

Išveskime mūsų skaičių taip, kad jo sveikojoje dalyje būtų du skaitmenys. Tuo pačiu minimalus skaitmenų skaičius trupmeninėje dalyje bus 1:

<div>{{ num | number:'2.1' }}</div>

Kodo vykdymo rezultatas:

<div>18.0</div>

Pavyzdys

Dabar nustatykime, kad trupmeninėje mūsų skaičiaus dalyje būtų rodomi du skaitmenys:

<div>{{ num | number:'2.2' }}</div>

Kodo vykdymo rezultatas:

<div>18.00</div>

Pavyzdys

Nustatykime naują skaičių:

export class AppComponent {
	num: number = 18.67899;
}

Ir išveskime jį HTML šablone taip, kad trupmeninėje dalyje būtų rodomi daugiausiai du skaitmenys:

<div>{{ num | number:'2.1-2' }}</div>

Kodo vykdymo rezultatas:

<div>18.68</div>

Pavyzdys

Dabar suformatuokime mūsų skaičių taip, kad jo sveikojoje dalyje būtų trys skaitmenys. O trupmeninėje dalyje atsispindėtų penki skaitmenys:

<div>{{ num | number:'3.5-6' }}</div>

Kodo vykdymo rezultatas:

<div>018.67899</div>

Pavyzdys

Pabandykime išvesti minimalų skaitmenų skaičių trupmeninėje dalyje, viršijantį nustatytą skaičių. Mūsų atveju išveskime šešis skaitmenis:

<div>{{ num | number:'3.6-8' }}</div>

Kodo vykdymo rezultate pamatysime, kad kanalas DecimalPipe pridėjo nulį prie trupmeninės dalies:

<div>018.678990</div>