Numbrite vormindamine torude abil Angularis

Kasutades toru DecimalPipe saab vormindada numbreid. Esimeses parameetris toru jaoks anname me minimaalse numbrite arvu täisosas. Teises parameetris määrame minimaalse numbrite arvu murdosas. Kolmandas mittekohustuslikus parameetris määrame maksimaalse numbrite arvu murdosas.

Hoolimata asjaolust, et meie toru nimi on DecimalPipe, selle kutsumiseks kirjutame me nii: number.

Proovime praktikas. Komponendi klassis määrame järgmise numbri:

export class AppComponent {
	num: number = 18;
}

Näide

Väljastame oma numbri nii, et selle täisosas oleks kaks numbrit. Samal ajal minimaalne numbrite arv murdosas on 1:

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

Koodi täitmise tulemus:

<div>18.0</div>

Näide

Nüüd määrame, et meie numbri murdosas kuvataks kaks numbrit:

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

Koodi täitmise tulemus:

<div>18.00</div>

Näide

Määrame uue numbri:

export class AppComponent {
	num: number = 18.67899;
}

Ja väljastame selle HTML-i mallis nii, et murdosas kuvataks maksimaalselt kaks numbrit:

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

Koodi täitmise tulemus:

<div>18.68</div>

Näide

Nüüd vormindame oma numbrit nii, et selle täisosas oleks kolm numbrit. Ja murdosas kuvataks viis numbrit:

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

Koodi täitmise tulemus:

<div>018.67899</div>

Näide

Proovime väljastada minimaalse numbrite arvu murdosas, mis ületab määratud arvu numbrite arvu. Meie puhul väljastame kuus numbrit:

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

Koodi täitmise tulemusena näeme, et toru DecimalPipe lisas nulli murdosale:

<div>018.678990</div>