Angular တွင် Pipe များဖြင့် ကိန်းဂဏန်းများကို ပုံစံချခြင်း

DecimalPipe ကို အသုံးပြု၍ ကိန်းဂဏန်းများကို ပုံစံချနိုင်ပါသည်။ Pipe ၏ ပထမပါရာမီတာတွင် ကိန်းရင်းအပိုင်း၌ အနည်းဆုံးဂဏန်းအရေအတွက်ကို ပေးပို့ပါသည်။ ဒုတိယပါရာမီတာတွင် ကိန်းဆိုင်ရာအပိုင်း၌ အနည်းဆုံးဂဏန်းအရေအတွက်ကို သတ်မှတ်ပါသည်။ တတိယမဖြစ်မနေသတ်မှတ်ရန်မလိုသော ပါရာမီတာတွင် ကိန်းဆိုင်ရာအပိုင်း၌ အများဆုံးဂဏန်းအရေအတွက်ကို သတ်မှတ်ပါသည်။

ကျွန်ုပ်တို့၏ pipe ကို DecimalPipe ဟု ခေါ်သော်လည်း ၎င်းကိုခေါ်ယူရန် ဤသို့ရေးပါသည်: number။

လက်တွေ့လုပ်ဆောင်ကြည့်ကြပါစို့။ Component class တွင် အောက်ပါကိန်းဂဏန်းကို သတ်မှတ်ပါမည်:

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

ဥပမာ

ကျွန်ုပ်တို့၏ ကိန်းဂဏန်းကို ၎င်း၏ကိန်းရင်းအပိုင်းတွင် ဂဏန်းနှစ်လုံးပါဝင်စေရန် ထုတ်ပြကြည့်ကြပါစို့။ ထိုသို့ဖြင့် ကိန်းဆိုင်ရာအပိုင်းရှိ အနည်းဆုံးဂဏန်းအရေအတွက်သည် 1 ဖြစ်ပါမည်:

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

ကုဒ်၏ ရလဒ်:

html<div>18.0</div>

ဥပမာ

ယခု ကျွန်ုပ်တို့၏ ကိန်းဆိုင်ရာအပိုင်းတွင် ဂဏန်းနှစ်လုံးပြသစေရန် သတ်မှတ်ပါမည်:

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

ကုဒ်၏ ရလဒ်:

html<div>18.00</div>

ဥပမာ

ကိန်းဂဏန်းအသစ်တစ်ခု သတ်မှတ်ပါမည်:

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

၎င်းကို HTML template ထဲတွင် ကိန်းဆိုင်ရာအပိုင်း၌ အများဆုံးဂဏန်းနှစ်လုံးသာ ပြသစေရန် ထုတ်ပြပါမည်:

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

ကုဒ်၏ ရလဒ်:

html<div>18.68</div>

ဥပမာ

ယခု ကျွန်ုပ်တို့၏ ကိန်းဂဏန်းကို ၎င်း၏ကိန်းရင်းအပိုင်းတွင် ဂဏန်းသုံးလုံးပါဝင်စေရန် ပုံစံချပါမည်။ ထိုသို့ဖြင့် ကိန်းဆိုင်ရာအပိုင်းတွင် ဂဏန်းငါးလုံး ပြသပါမည်:

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

ကုဒ်၏ ရလဒ်:

html<div>018.67899</div>

ဥပမာ

ကိန်းဆိုင်ရာအပိုင်းရှိ အနည်းဆုံးဂဏန်းအရေအတွက်ကို ပေးထားသောကိန်းဂဏန်းထက် ပိုမိုများပြားစေရန် ထုတ်ပြကြည့်ကြပါစို့။ ကျွန်ုပ်တို့၏ ကိစ္စတွင် ဂဏန်းခြောက်လုံးကို ထုတ်ပြပါမည်:

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

ကုဒ်ကို လုပ်ဆောင်ခြင်း၏ ရလဒ်အဖြစ် ကျွန်ုပ်တို့မြင်တွေ့ရမည်မှာ DecimalPipe သည် သုညကို ကိန်းဆိုင်ရာအပိုင်းသို့ ပေါင်းထည့်ခဲ့သည်:

html<div>018.678990</div>

လက်တွေ့လေ့ကျင့်ခန်းများ

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'