Angularでのパイプを使用した数値のフォーマット

パイプDecimalPipeを使用して、 数値をフォーマットすることができます。パイプの最初のパラメータでは、 整数部分の最小桁数を指定します。2番目のパラメータでは、 小数部分の最小桁数を指定します。3番目のオプションパラメータでは、 小数部分の最大桁数を指定します。

パイプの名前がDecimalPipeであるにもかかわらず、 呼び出すときはnumberと記述します。

実際に試してみましょう。コンポーネントクラスで 次の数値を定義します：

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

例

整数部分が2桁になるように数値を表示しましょう。同時に、 小数部分の最小桁数は1とします：

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

コード実行結果：

html<div>18.0</div>

例

次に、数値の小数部分に2桁表示されるように設定しましょう：

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テンプレートで、小数部分が最大2桁表示されるように 出力しましょう：

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

コード実行結果：

html<div>18.68</div>

例

整数部分が3桁、小数部分が5桁表示されるように 数値をフォーマットしましょう：

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

コード実行結果：

html<div>018.67899</div>

例

小数部分の最小桁数を、数値に含まれる桁数よりも多く指定してみましょう。 この場合、6桁表示します：

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'