Getalle formatering met behulp van pype in Angular

Met die DecimalPipe-pyp kan jy getalle formateer. In die eerste parameter van die pyp gee ons die minimum aantal syfers in die heelgetalgedeelte aan. In die tweede parameter spesifiseer ons die minimum aantal syfers in die breukgedeelte. In die derde opsionele parameter stel ons die maksimum aantal syfers in die breukgedeelte in.

Ten spyte daarvan dat ons pyp die naam DecimalPipe dra, skryf ons so om dit aan te roep: number.

Kom ons probeer dit in die praktyk. In die komponentklas laat ons die volgende getal instel:

export class AppComponent {
	num: number = 18;
}

Voorbeeld

Kom ons toon ons getal sodat daar twee syfers in sy heelgetalgedeelte is. Die minimum aantal syfers in die breukgedeelte sal 1 wees:

<div>{{ num | number:'2.1' }}</div>

Resultaat van die kode:

<div>18.0</div>

Voorbeeld

Laat ons nou instel dat twee syfers in die breukgedeelte van ons getal vertoon moet word:

<div>{{ num | number:'2.2' }}</div>

Resultaat van die kode:

<div>18.00</div>

Voorbeeld

Laat ons 'n nuwe getal instel:

export class AppComponent {
	num: number = 18.67899;
}

En toon dit in die HTML-sjabloon sodat hoogstens twee syfers in die breukgedeelte vertoon word:

<div>{{ num | number:'2.1-2' }}</div>

Resultaat van die kode:

<div>18.68</div>

Voorbeeld

Laat ons nou ons getal so formateer dat daar drie syfers in sy heelgetalgedeelte is. En dat vyf syfers in die breukgedeelte verskyn:

<div>{{ num | number:'3.5-6' }}</div>

Resultaat van die kode:

<div>018.67899</div>

Voorbeeld

Kom ons probeer om die minimum aantal syfers in die breukgedeelte te toon wat die gestelde aantal in die getal oorskry. In ons geval toon ons ses syfers:

<div>{{ num | number:'3.6-8' }}</div>

As gevolg van die kode sal ons sien dat die DecimalPipe-pyp 'n nul by die breukgedeelte gevoeg het:

<div>018.678990</div>