Skaitļu formatēšana, izmantojot caurules Angular

Izmantojot cauruli DecimalPipe, var formatēt skaitļus. Pirmajā caurules parametrā mēs norādām minimālo ciparu skaitu veselajā daļā. Otrajā parametrā mēs norādām minimālo ciparu skaitu daļējā daļā. Trešajā neobligātajā parametrā mēs norādām maksimālo ciparu skaitu daļējā daļā.

Pat ja mūsu caurule tiek saukta par DecimalPipe, lai to izsauktu, mēs rakstām šādi: number.

Izmēģināsim praksē. Komponenta klasē iestatīsim šādu skaitli:

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

Piemērs

Parādīsim mūsu skaitli tā, lai tā veselajā daļā būtu divi cipari. Tajā pašā laikā minimālais ciparu skaits daļējā daļā būs 1:

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

Koda izpildes rezultāts:

html<div>18.0</div>

Piemērs

Tagad iestatīsim, lai daļējā daļā mūsu skaitļa tiktu parādīti divi cipari:

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

Koda izpildes rezultāts:

html<div>18.00</div>

Piemērs

Iestatīsim jaunu skaitli:

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

Un parādīsim to HTML veidnē tā, lai daļējā daļā tiktu parādīti maksimāli divi cipari:

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

Koda izpildes rezultāts:

html<div>18.68</div>

Piemērs

Tagad formatēsim mūsu skaitli tā, lai tā veselajā daļā būtu trīs cipari. Un daļējā daļā tiktu parādīti pieci cipari:

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

Koda izpildes rezultāts:

html<div>018.67899</div>

Piemērs

Mēģināsim parādīt minimālo ciparu skaitu daļējā daļā, pārsniedzot noteikto skaitu skaitlī. Mūsu gadījumā parādīsim sešus ciparus:

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

Koda izpildes rezultātā mēs redzēsim, ka caurule DecimalPipe pievienoja nulli daļējai daļai:

html<div>018.678990</div>

Praktiskie uzdevumi

typescriptnum: number = 15;

typescript'015.000'

typescriptnum: number = 12.345;

typescript'0012.345'

typescriptnum: number = 12.345;

typescript'12.3'

typescriptnum: number = 12.345;

typescript'012.34500'

typescriptnum: number = -7.261;

typescript'-007.3'

typescriptnum: number = 100.261923;

typescript'100.9226130'

typescriptnum: number = 100.926613;

typescript'0100.93'