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

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

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

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

app/app.component.tsexport class AppComponent {
  num: number = 18;
}

Օրինակ

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

app/app.component.html<div>{{ num | number:'2.1' }}</div>

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

html<div>18.0</div>

Օրինակ

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

app/app.component.html<div>{{ num | number:'2.2' }}</div>

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

html<div>18.00</div>

Օրինակ

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

app/app.component.tsexport class AppComponent {
  num: number = 18.67899;
}

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

app/app.component.html<div>{{ num | number:'2.1-2' }}</div>

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

html<div>18.68</div>

Օրինակ

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

app/app.component.html<div>{{ num | number:'3.5-6' }}</div>

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

html<div>018.67899</div>

Օրինակ

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

app/app.component.html<div>{{ num | number:'3.6-8' }}</div>

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

html<div>018.678990</div>

Գործնական առաջադրանքներ

typescriptnum: number = 15;

typescript'015.000'

typescriptnum: number = 12.345;

typescript'0012.345'

typescriptnum: number = 12.345;

typescript'12.3'

typescriptnum: number = 12.345;

typescript'012.34500'

typescriptnum: number = -7.261;

typescript'-007.3'

typescriptnum: number = 100.261923;

typescript'100.9226130'

typescriptnum: number = 100.926613;

typescript'0100.93'