Թվերի ֆորմատավորումը Angular-ի խողովակների միջոցով

DecimalPipe խողովակի միջոցով կարելի է ֆորմատավորել թվեր: Խողովակի առաջին պարամետրում մենք փոխանցում ենք նվազագույն թվանշանների քանակը ամբողջական մասում: Երկրորդ պարամետրում նշում ենք նվազագույն թվանշանների քանակը կոտորակային մասում: Երրորդ ոչ պարտադիր պարամետրում նշում ենք առավելագույն թվանշանների քանակը կոտորակային մասում:

Չնայած այն հանգամանքին, որ մեր խողովակը կոչվում է DecimalPipe, այն կանչելու համար մենք գրում ենք այսպես՝ number:

Եկեք փորձենք գործնականում: Կոմպոնենտի դասում սահմանենք հետևյալ թիվը:

export class AppComponent {
	num: number = 18;
}

Օրինակ

Եկեք արտածենք մեր թիվն այնպես, որ դրա ամբողջական մասում լինեն երկու թվանշան: Ընդ որում նվազագույն թվանշանների քանակը կոտորակային մասում կկազմի 1:

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

Կոդի կատարման արդյունքը:

<div>18.0</div>

Օրինակ

Այժմ եկեք սահմանենք, որ մեր թվի կոտորակային մասում արտացոլվեն երկու թվանշան.

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

Կոդի կատարման արդյունքը.

<div>18.00</div>

Օրինակ

Եկեք սահմանենք նոր թիվ.

export class AppComponent {
	num: number = 18.67899;
}

Եվ արտածենք այն HTML-ձևանմուշում այնպես, որ կոտորակային մասում արտացոլվեն առավելագույնը երկու թվանշան.

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

Կոդի կատարման արդյունքը.

<div>18.68</div>

Օրինակ

Այժմ ֆորմատավորենք մեր թիվն այնպես, որ դրա ամբողջական մասում լինեն երեք թվանշան: Իսկ կոտորակային մասում արտացոլվեն հինգ թվանշան.

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

Կոդի կատարման արդյունքը.

<div>018.67899</div>

Օրինակ

Եկեք փորձենք արտածել նվազագույն թվանշանների քանակը կոտորակային մասում, որն անցնում է թվի մեջ նշված քանակից: Մեր դեպքում արտածենք վեց թվանշան.

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

Կոդի կատարման արդյունքում մենք կտեսնենք, որ DecimalPipe խողովակը զրո է ավելացրել կոտորակային մասին.

<div>018.678990</div>