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>

Практикалық тапсырмалар

Берілген сан:

num: number = 15;

Оны келесі түрде пішімдеңіз:

'015.000'

Берілген сан:

num: number = 12.345;

Оны келесі түрде пішімдеңіз:

'0012.345'

Берілген сан:

num: number = 12.345;

Оны келесі түрде пішімдеңіз:

'12.3'

Берілген сан:

num: number = 12.345;

Оны келесі түрде пішімдеңіз:

'012.34500'

Берілген сан:

num: number = -7.261;

Оны келесі түрде пішімдеңіз:

'-007.3'

Берілген сан:

num: number = 100.261923;

Оны келесі түрде пішімдеңіз:

'100.9226130'

Берілген сан:

num: number = 100.926613;

Оны келесі түрде пішімдеңіз:

'0100.93'