Formatering av tall med kanaler i Angular

Med DecimalPipe kanalen kan du formatere tall. I den første parameteren til kanalen sender vi minimum antall sifre i heltallsdelen. I den andre parameteren spesifiserer vi minimum antall sifre i brøkdelen. I den tredje valgfrie parameteren setter vi maksimalt antall sifre i brøkdelen.

Selv om kanalen vår heter DecimalPipe, for å kalle den skriver vi silk: number.

La oss prøve i praksis. I komponentklassen setter vi følgende tall:

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

Eksempel

La oss vise tallet vårt slik at det er to sifre i heltallsdelen. Samtidig vil minimum antall sifre i brøkdelen være 1:

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

Resultat av kodekjøring:

html<div>18.0</div>

Eksempel

La oss nå sette at to sifre skal vises i brøkdelen av tallet vårt:

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

Resultat av kodekjøring:

html<div>18.00</div>

Eksempel

La oss sette et nytt tall:

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

Og vis det i HTML-malen slik at maksimalt to sifre vises i brøkdelen:

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

Resultat av kodekjøring:

html<div>18.68</div>

Eksempel

La oss nå formatere tallet vårt slik at det er tre sifre i heltallsdelen. Og fem sifre vises i brøkdelen:

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

Resultat av kodekjøring:

html<div>018.67899</div>

Eksempel

La oss prøve å vise minimum antall sifre i brøkdelen som overstiger det angitte antallet i tallet. I vårt tilfelle viser vi seks sifre:

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

Som et resultat av kodekjøring vil vi se at DecimalPipe kanalen la til en null i brøkdelen:

html<div>018.678990</div>