Angular 2 には CurrencyPipe というパイプがあり、数値から一部の小数をフィルター処理することに気付きました。これにより、ISO 通貨インジケーター (つまり、「USD」またはその他の現地通貨) も追加されます。
問題は、出力が次のように表示されることです。
USD123
USD と 123 の間にスペースがない場合、これは本当に推奨される動作ですか? このためには独自のパイプを作成する必要がありますか、それともスペースを追加するために何かできることがありますか?
ここにコードがあります:
<span>{{ product.price | currency:'USD' }}</span>
ベストアンサー1
この問題は、ちょっとした賢いCSSを使って解決することができます。最初の文字の疑似要素、スパンにクラスを追加します:
<span class="price">{{ product.price | currency:'USD':true }}</span>
そして、CSS に以下を追加します:
.price {
display: inline-block;
}
.price::first-letter {
padding-right: 0.3em;
}
最初のルールは、価格がブロック コンテナー ボックス内に収まるようにします (表示ブロック::first-letterでは機能しますinline)。2 番目のルールは、通貨記号の後に少し余分なパディングを追加します。
好みに合わせて調整できます...