数値パイプのアンダーラインを角度4で指定する方法

角度パイプ4のデフォルトの（ロケール）桁区切りを指定するにはどうすればよいですか？数値パイプのアンダーラインを角度4で指定する方法

{{p.total | number}}

？

出典

2017-06-21 dragonfly

[角度2.0の数値のロケールを設定する方法]（https://stackoverflow.com/questions/37684360/how-to-set-locale-for-numbers-in-angular-2-0）の可能な複製 – Pac0

私はそうは思わない。私は、OPはデフォルトのセパレータを変更する方法を探しているのではなく、むしろ例外的なものを指定する引数をパイプに与えていると思います。残念ながらAngularのDecimalPipeでは後者は不可能です。あなたは自分のパイプを書くことができます。 –

DecimalPipeのAngularのドキュメントによると、https://angular.io/api/common/DecimalPipeには、書式設定に使用される文字を例外的に変更するためにパイプ呼び出しに追加できる明示的な引数はありません。

プロジェクト全体のロケールや関連するデフォルト値を変更したくない場合は、特別なケースを扱う独自のパイプを作成するのがベストショットです。心配しないで、パイプは非常に書きやすいです。

import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({ 
    name: 'numberfr' 
}) 
export class FrenchDecimalPipe implements PipeTransform { 

    transform(val: number): string { 
    // Format the output to display any way you want here. 
    // For instance: 
    if (val !== undefined && val !== null) { 
     return val.toLocaleString(/*arguments you need*/); 
    } else { 
     return ''; 
    } 
    } 
}

NgModuleに追加して使用することを忘れないでください。

出典

2017-06-21 10:09:26

大きな数値の場合、toLocaleStringは失敗します。例えば9007199254740991より大きい。それ以上の値は安全なJS数値ではない。 – Shantanu

@ Shantanu、うわー、ちょうどこのJSの制限について、おかげで学んだ！あなたが 'MAX_SAFE_INTEGER'を超えている場合でも、書式設定関数よりも心配する必要があるようです。私の答えを改善するための提案はありますか？ –

私の解決策は以下の通りです。それは誰かに役立つでしょう。

import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({ 
    name: 'amountConverter' 
}) 
export class AmountConverterPipe implements PipeTransform { 

    transform(value: number | string, locale?: string): string { 
    return new Intl.NumberFormat(locale, { 
     minimumFractionDigits: 2 
    }).format(Number(value)); 
    } 

}

桁数は、minimumFractionDigitsの値を変更して変更できます。次のように使用できるHTMLで

<span class="strong">{{Price | amountConverter:locale}}</span>

数値形式は、ロケールの値に応じて変化します。

詳しくは、https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormatを参照してください。

出典

2017-09-15 04:20:29

数値パイプのアンダーラインを角度4で指定する方法

答えて

関連する問題