რიცხვების ფორმატირება პაიპებით 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>