Formatering af tal med pipes i Angular

Med DecimalPipe pipen kan man formatere tal. I den første parameter for pipen angiver vi det minimale antal cifre i heltalsdelen. I den anden parameter angiver vi det minimale antal cifre i brøkdelen. I den tredje valgfrie parameter angiver vi det maksimale antal cifre i brøkdelen.

På trods af at vores pipe hedder DecimalPipe, skriver vi sådan her for at kalde den: number.

Lad os prøve det i praksis. I komponentklassen angiver vi følgende tal:

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

Eksempel

Lad os udskrive vores tal, så der er to cifre i dets heltalsdel. Samtidig vil det minimale antal cifre i brøkdelen være 1:

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

Resultat af kodeudførelse:

html<div>18.0</div>

Eksempel

Lad os nu angive, at der skal vises to cifre i brøkdelen af vores tal:

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

Resultat af kodeudførelse:

html<div>18.00</div>

Eksempel

Lad os angive et nyt tal:

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

Og udskrive det i HTML-skabelonen, så der maksimalt vises to cifre i brøkdelen:

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

Resultat af kodeudførelse:

html<div>18.68</div>

Eksempel

Lad os nu formatere vores tal, så der er tre cifre i dets heltalsdel. Og i brøkdelen vises fem cifre:

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

Resultat af kodeudførelse:

html<div>018.67899</div>

Eksempel

Lad os prøve at udskrive det minimale antal cifre i brøkdelen, der overstiger det angivne antal i tallet. I vores tilfælde udskriver vi seks cifre:

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

Som resultat af kodeudførelsen vil vi se, at DecimalPipe pipen tilføjede et nul til brøkdelen:

html<div>018.678990</div>