Angular හි පයිප් භාවිතයෙන් සංඛ්‍යා ආකෘතිකරණය කිරීම

DecimalPipe පයිප් එක භාවිතයෙන් සංඛ්‍යා ආකෘතිකරණය කළ හැකිය. පයිප් එකේ පළමු පරාමිතියේ දී අපි අවම ඉලක්කම් ගණන පූර්ණ සංඛ්‍යා කොටසේ සඳහන් කරමු. දෙවන පරාමිතියේ දී අපි අවම ඉලක්කම් ගණන දශම කොටසේ සඳහන් කරමු. තෙවන, විකල්ප පරාමිතියේ දී අපි උපරිම ඉලක්කම් ගණන දශම කොටසේ සඳහන් කරමු.

අපගේ පයිප් එක DecimalPipe ලෙස හැඳින්වුවද, එය ලෙස කැඳවීමට අපි මෙසේ ලියමු: number.

දැන් අපි ප්‍රායෝගිකව උත්සාහ කරමු. සංරචක වර්ගයේ දී පහත සංඛ්‍යාව නියම කරමු:

export class AppComponent {
	num: number = 18;
}

උදාහරණය

දැන් අපගේ සංඛ්‍යාව එහි පූර්ණ සංඛ්‍යා කොටසේ ඉලක්කම් දෙකක් පවතින පරිදි ප්‍රදර්ශනය කරමු. මෙහිදී දශම කොටසේ අවම ඉලක්කම් ගණන 1 වේ:

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

කේතය ක්‍රියාත්මක කිරීමේ ප්‍රතිඵලය:

<div>18.0</div>

උදාහරණය

දැන් අපගේ සංඛ්‍යාවේ දශම කොටසේ ඉලක්කම් දෙකක් ප්‍රදර්ශනය වන පරිදි නියම කරමු:

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

කේතය ක්‍රියාත්මක කිරීමේ ප්‍රතිඵලය:

<div>18.00</div>

උදාහරණය

දැන් නව සංඛ්‍යාවක් නියම කරමු:

export class AppComponent {
	num: number = 18.67899;
}

සහ එය HTML රුපරේඛාවේ දශම කොටසේ උපරිමව ඉලක්කම් දෙකක් ප්‍රදර්ශනය වන පරිදි ප්‍රතිදානය කරමු:

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

කේතය ක්‍රියාත්මක කිරීමේ ප්‍රතිඵලය:

<div>18.68</div>

උදාහරණය

දැන් අපගේ සංඛ්‍යාව එහි පූර්ණ සංඛ්‍යා කොටසේ ඉලක්කම් තුනක් පවතින පරිදි ආකෘතිකරණය කරමු. දශම කොටසේ ඉලක්කම් පහක් ප්‍රදර්ශනය වේ:

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

කේතය ක්‍රියාත්මක කිරීමේ ප්‍රතිඵලය:

<div>018.67899</div>

උදාහරණය

දැන් අපි දශම කොටසේ අවම ඉලක්කම් ගණන, සංඛ්‍යාවේ නියම කළ ගණනට වඩා වැඩි කර ප්‍රදර්ශනය කිරීමට උත්සාහ කරමු. අපගේ නඩුවේ දී අපි ඉලක්කම් හයක් ප්‍රදර්ශනය කරමු:

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

කේතය ක්‍රියාත්මක කිරීමේ ප්‍රතිඵලය වශයෙන් අපි දකින්නේ, DecimalPipe පයිප් එක ශුන්‍යයක් දශම කොටසට එකතු කර ඇති බවයි:

<div>018.678990</div>