Kuweka Nambari kwa Umbo Kwa Kutumia Mifereji katika Angular

Kwa kutumia mfereji DecimalPipe unaweza kuweka nambari kwa umbo. Kwenye parameta ya kwanza ya mfereji tunapita idadi ya chini ya tarakimu kwenye sehemu kamili. Kwenye parameta ya pili tunaainisha idadi ya chini ya tarakimu kwenye sehemu ya desimali. Kwenye parameta ya tatu ya hiari tunaweka idadi ya juu ya tarakimu kwenye sehemu ya desimali.

Licha ya kwamba mfereji wetu unaitwa DecimalPipe, kuiita tunaandika hivi: number.

Tujaribu kwenye mazoezi. Katika darasa la komponenti tuweke nambari ifuatayo:

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

Mfano

Tuionyeshe nambari yetu ili kwenye sehemu yake kamili kuwe na tarakimu mbili. Wakati huo huo idadi ya chini ya tarakimu kwenye sehemu ya desimali itakuwa 1:

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

Matokeo ya utekelezaji wa kodi:

html<div>18.0</div>

Mfano

Sasa tuweke, ili kwenye sehemu ya desimali ya nambari yetu ionekane tarakimu mbili:

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

Matokeo ya utekelezaji wa kodi:

html<div>18.00</div>

Mfano

Tuweke nambari mpya:

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

Na tuiionyeshe kwenye kiolezo cha HTML, ili kwenye sehemu ya desimali ionekane tarakimu mbili pekee:

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

Matokeo ya utekelezaji wa kodi:

html<div>18.68</div>

Mfano

Sasa tuweke nambari yetu kwa umbo, ili kwenye sehemu yake kamili kuwe na tarakimu tatu. Na kwenye sehemu ya desimali ionekane tarakimu tano:

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

Matokeo ya utekelezaji wa kodi:

html<div>018.67899</div>

Mfano

Tujaribu kuonyesha idadi ya chini ya tarakimu kwenye sehemu ya desimali, inayozidi idadi iliyowekwa kwenye nambari. Kwenye kesi yetu tuonyeshe tarakimu sita:

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

Kama matokeo ya utekelezaji wa kodi tutaona, kwamba mfereji DecimalPipe umeongeza sifuri kwenye sehemu ya desimali:

html<div>018.678990</div>