Formatering av tal med pipes i Angular

Med pipe:n DecimalPipe kan man formatera tal. I den första parametern till pipe:n skickar vi det minsta antalet siffror i heltalsdelen. I den andra parametern anger vi det minsta antalet siffror i bråkdelen. I den tredje valfria parametern anger vi det maximala antalet siffror i bråkdelen.

Trots att vår pipe heter DecimalPipe, skriver vi för att anropa den så här: number.

Låt oss prova i praktiken. I komponentklassen anger vi följande tal:

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

Exempel

Låt oss visa vårt tal så att det i heltalsdelen finns två siffror. Samtidigt ska det minsta antalet siffror i bråkdelen vara 1:

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

Resultat av koden:

html<div>18.0</div>

Exempel

Låt oss nu ange att två siffror ska visas i bråkdelen av vårt tal:

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

Resultat av koden:

html<div>18.00</div>

Exempel

Låt oss ange ett nytt tal:

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

Och visa det i HTML-mallen så att maximalt två siffror visas i bråkdelen:

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

Resultat av koden:

html<div>18.68</div>

Exempel

Låt oss nu formatera vårt tal så att det finns tre siffror i heltalsdelen. Och fem siffror visas i bråkdelen:

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

Resultat av koden:

html<div>018.67899</div>

Exempel

Låt oss försöka visa det minsta antalet siffror i bråkdelen som överstiger det angivna antalet i talet. I vårt fall visar vi sex siffror:

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

Som ett resultat av koden ser vi att pipe:n DecimalPipe lade till en nolla till bråkdelen:

html<div>018.678990</div>