web-dev-qa-db-ja.com

angular 2で、数値を2つの10進数の丸められた通貨として表示するにはどうすればよいですか？

例：

  • 1.99-> $ 1.99
  • 1.9-> $ 1.90
  • 1-> $ 1.00
  • 1.005-> $ 1.01
  • 1.004-> $ 1.00

{{num | currency:'USD':true}}を使用していますが、末尾の0は表示されません。

filterroundingangularcurrency
33
g.sui

このコードを使用してください。これが実際の例です http://plnkr.co/edit/xnN1HnJtTel6WA24GttR?p=preview{{num | currency:'USD':true:'1.2-2'}}

説明：
number_expression | number [：digitInfo]

最後に、テキストとして10進数を取得します。説明を見つけます。

number_expression：出力に数値を与えるangular式。

number：パイプ演算子で使用されるパイプキーワード。

digitInfo：数値形式を定義します。

次に、digitInfoの使用方法を理解します。 digitInfoの構文は次のとおりです。

{minIntegerDigits}。{minFractionDigits}-{maxFractionDigits}

説明を見つけます。

minIntegerDigits：整数桁の最小数。デフォルトは1です（この例では1）。

minFractionDigits：小数桁の最小数。デフォルトは0です（この例では2）。

maxFractionDigits：小数桁の最大数。デフォルトは3です（この例では2）。

82
Mubashir

あなたは正しい答えを手に入れましたが、それでも私はこの答えをさらに詳しく説明できると思うので、答えとして投稿してください

まず、プロジェクトで使用するangle2の利用可能なパイプの数があり、それらのいくつかを以下にリストします

CurrencyPipe、DatePipe、UpperCasePipe、LowerCasePipe、およびPercentPipeなど。

ここであなたの質問として、通貨パイプに関連する問題があります。他の回答としてもう少し説明したいと思います。

CurrencyPipe：

パイプは、出力を微調整するために、任意の数のオプションパラメーターを受け入れることができます。パイプ名の後にコロン（：）を付けてパラメーター値を追加することで、パラメーターをパイプに追加します（例：currency： 'EUR'）。パイプが複数のパラメーターを受け入れる場合、値をコロンで区切ります（例：スライス：1：5）。

{{number | currency： 'your_type'：true： '1.2-2'}}

ここ...最初のパラメーターは、EUR、USD、またはいずれかである通貨タイプです。2番目のパラメーターは、デフォルトでfalseであるsymbolDisplayに対してtrue/falseです。それから3番目は、基本的に範囲制限です。小数点の前の場所には、小数点の後に最小長と最大長を設定し、固定数を設定することができます（または、デフォルトでは空白のままにします）。

私はここに投稿しているangular2のパイプのいくつかの良いチュートリアルを見つけました。

http://voidcanvas.com/angular-2-pipes-filters/

https://angular.io/docs/ts/latest/guide/pipes.html

それがパイプについての助けと明確化を願っています!! @Pardeep !!

19
Pardeep Jain

正しいパイプを使用しています。出力に数字情報を追加するだけです。

{{num | currency:'USD':true}}は...

{{num | currency:'USD':true:'1.2-2'}}

参照用：'USD'は通貨の種類を表し、trueは通貨記号（$）を表示するかどうかを表し、'1.2-2'は数字情報を表します。

桁情報は{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}です。

minIntegerDigitsは、使用する整数の最小桁数であり、デフォルトは1です。
minFractionDigitsは、分数の後の最小桁数であり、デフォルトは0です。
maxFractionDigitsは、分数の後の最大桁数で、デフォルトは3です。

桁情報のソースは次の場所にあります： https://angular.io/docs/ts/latest/api/common/index/DecimalPipe-pipe.html

11
My Stack Overfloweth

私のように、HTMLではなくTypeScript/javascriptでこれを実行しようとしている場合は、 toLocaleString も使用できます。

したがって、数値を通貨文字列に変換するには：

  ppCurrency(number) {
   return number.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
  }
8
swhitman

以下は2桁の10進数で変換します

{{num | currency : '$' : 2}}

角2

{{num | currency:'USD':true:'1.2-2'}}
5
Santhy K
<input type="number" [(ngModel)]="myModel" (keyup)="onBlurMethod()">
<br>
<br> The formatted currency is :
<br> {{myModel | currency:'USD':true:'1.2-2' }}

これが実際の例です。

http://plnkr.co/edit/pSK8p7u3oo4WsAB9aFBS?p=preview

1
Kumar Ranjan