Angularでのパイプを使用した数値のフォーマット
パイプDecimalPipeを使用して、
数値をフォーマットすることができます。パイプの最初のパラメータでは、
整数部分の最小桁数を指定します。2番目のパラメータでは、
小数部分の最小桁数を指定します。3番目のオプションパラメータでは、
小数部分の最大桁数を指定します。
パイプの名前がDecimalPipeであるにもかかわらず、
呼び出すときはnumberと記述します。
実際に試してみましょう。コンポーネントクラスで 次の数値を定義します：
export class AppComponent {
num: number = 18;
}
例
整数部分が2桁になるように数値を表示しましょう。同時に、
小数部分の最小桁数は1とします：
<div>{{ num | number:'2.1' }}</div>
コード実行結果：
<div>18.0</div>
例
次に、数値の小数部分に2桁表示されるように設定しましょう：
<div>{{ num | number:'2.2' }}</div>
コード実行結果：
<div>18.00</div>
例
新しい数値を定義しましょう：
export class AppComponent {
num: number = 18.67899;
}
HTMLテンプレートで、小数部分が最大2桁表示されるように 出力しましょう：
<div>{{ num | number:'2.1-2' }}</div>
コード実行結果：
<div>18.68</div>
例
整数部分が3桁、小数部分が5桁表示されるように 数値をフォーマットしましょう：
<div>{{ num | number:'3.5-6' }}</div>
コード実行結果：
<div>018.67899</div>
例
小数部分の最小桁数を、数値に含まれる桁数よりも多く指定してみましょう。 この場合、6桁表示します：
<div>{{ num | number:'3.6-8' }}</div>
コード実行結果から、パイプDecimalPipeが
小数部分にゼロを追加したことがわかります：
<div>018.678990</div>
練習問題
以下の数値が与えられます：
num: number = 15;
次の形式にフォーマットしてください：
'015.000'
以下の数値が与えられます：
num: number = 12.345;
次の形式にフォーマットしてください：
'0012.345'
以下の数値が与えられます：
num: number = 12.345;
次の形式にフォーマットしてください：
'12.3'
以下の数値が与えられます：
num: number = 12.345;
次の形式にフォーマットしてください：
'012.34500'
以下の数値が与えられます：
num: number = -7.261;
次の形式にフォーマットしてください：
'-007.3'
以下の数値が与えられます：
num: number = 100.261923;
次の形式にフォーマットしてください：
'100.9226130'
以下の数値が与えられます：
num: number = 100.926613;
次の形式にフォーマットしてください：
'0100.93'
