Angular da Kanallar Yordamida Raqamlarni Formatlash

DecimalPipe kanali yordamida raqamlarni formatlash mumkin. Kananing birinchi parametrida biz butun qismdagi minimal raqamlar sonini beramiz. Ikkinchi parametrda kasr qismidagi minimal raqamlar sonini belgilaymiz. Uchinchi ixtiyoriy parametrda kasr qismidagi maksimal raqamlar sonini belgilaymiz.

Bizning kanalimiz DecimalPipe deb nomlanganiga qaramasdan, uni chaqirish uchun biz shunday yozamiz: number.

Keling, amalda sinab ko'raylik. Komponent klassida quyidagi raqamni belgilaymiz:

export class AppComponent {
	num: number = 18;
}

Misol

Keling, raqamimizni butun qismida ikkita raqam bo'lishi uchun chiqaraylik. Bunda kasr qismidagi minimal raqamlar soni 1 bo'ladi:

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

Kodni bajarish natijasi:

<div>18.0</div>

Misol

Endi keling, raqamimizning kasr qismida ikkita raqam ko'rsatilishini belgilaymiz:

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

Kodni bajarish natijasi:

<div>18.00</div>

Misol

Keling, yangi raqam belgilaymiz:

export class AppComponent {
	num: number = 18.67899;
}

Va uni HTML shablonida shunday chiqaramizki, kasr qismida maksimal ikkita raqam ko'rsatilsin:

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

Kodni bajarish natijasi:

<div>18.68</div>

Misol

Endi raqamimizni butun qismida uchta raqam bo'lishi uchun formatlaymiz. Kasr qismida esa beshta raqam ko'rsatilsin:

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

Kodni bajarish natijasi:

<div>018.67899</div>

Misol

Keling, kasr qismidagi minimal raqamlar sonini raqamdagi belgilangan miqdordan ko'p chiqarishga harakat qilaylik. Bizning holatda oltta raqam chiqaramiz:

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

Kodni bajarish natijasida biz ko'ramizki, DecimalPipe kanali kasr qismiga nol qo'shdi:

<div>018.678990</div>