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>