Formatowanie liczb za pomocą potoków w Angular

Za pomocą potoku DecimalPipe można formatować liczby. W pierwszym parametrze potoku przekazujemy minimalną liczbę cyfr w części całkowitej. W drugim parametrze określamy minimalną liczbę cyfr w części ułamkowej. W trzecim, opcjonalnym parametrze, ustawiamy maksymalną liczbę cyfr w części ułamkowej.

Pomimo że nasz potok nazywa się DecimalPipe, aby go wywołać, piszemy tak: number.

Wypróbujmy to w praktyce. W klasie komponentu ustawmy następującą liczbę:

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

Przykład

Wyświetlmy naszą liczbę tak, aby w jej części całkowitej były dwie cyfry. Przy tym minimalna liczba cyfr w części ułamkowej wyniesie 1:

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

Wynik wykonania kodu:

html<div>18.0</div>

Przykład

Teraz ustawmy, aby w części ułamkowej naszej liczby wyświetlały się dwie cyfry:

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

Wynik wykonania kodu:

html<div>18.00</div>

Przykład

Ustawmy nową liczbę:

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

I wyświetlmy ją w szablonie HTML tak, aby w części ułamkowej pokazywały się maksymalnie dwie cyfry:

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

Wynik wykonania kodu:

html<div>18.68</div>

Przykład

Teraz sformatujmy naszą liczbę tak, aby w jej części całkowitej były trzy cyfry. A w części ułamkowej wyświetliło się pięć cyfr:

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

Wynik wykonania kodu:

html<div>018.67899</div>

Przykład

Spróbujmy wyświetlić minimalną liczbę cyfr w części ułamkowej, przekraczającą ustawioną liczbę w liczbie. W naszym przypadku wyświetlmy sześć cyfr:

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

W wyniku wykonania kodu zobaczymy, że potok DecimalPipe dodał zero do części ułamkowej:

html<div>018.678990</div>