web-dev-qa-db-ja.com

angular 2.0で数値のロケールを設定する方法

スイスドイツ語の数値形式は「100'000.00」のようになります（「100,000.00」ではありません）。どうすれば変更できますか？ number_pipe.jsの設定をen-USからde-CHに変更しようとしましたが、成功しませんでした。

var defaultLocale: string = 'de-CH';

回避策はありますか、または独自のパイプを実装する必要がありますか？

angularnumberslocaleangular2-pipe
10
surfspider

locale-number。pipe.ts または

numeralJに基づいて単純なパイプを作成し、数値をフォーマットすることができます

https://github.com/adamwdraper/Numeral-js

2
AngJobs on Github

アプリに必要なロケールが1つだけの場合は、現時点（@angular〜2.4.0）でロケールプロバイダーを@NgModuleに登録できます。

@NgModule({
    ...
    providers: [
        {provide: LOCALE_ID, useValue: "de-CH"}
    ]
})
export class AppModule {}
11
mikevinmike

以下は私の解決策であり、誰かに役立ちます。

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));
  }

}

HTMLでは次のように使用できます

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

数値形式はロケールの値に応じて変わります。

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

3
Janith Widarshana

私にとって最良のオプションは、有名な https://www.npmjs.com/package/numeral パッケージでした。 （彼はmoment.jsと同じ論理で動作します）

それをインストールするには：npm i [email protected]およびタイプnpm i --save-dev @types/[email protected]

tsファイルでは、次のように使用できます。

`R$ ${numeral(<your-model-value>).value().toLocaleString()}`

HTMLテンプレートの場合、次のようにPipeを作成できます。

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

@Pipe({
  name: 'numberLocale'
})
export class NumberLocalePipe implements PipeTransform {

  transform(value: any, args?: any): any {

    const numeralNumber = numeral(value);

    return numeralNumber.value().toLocaleString();
  }
}

さらに、currency（およびロケール）の場合、通貨マスクにはパッケージng2-currency-maskを使用することをお勧めしますHTML（ただし、tsファイルでは、モデルオブジェクトのsaveの前に、numeralを使用してモデルのバインドされた値を「変換」する必要があります。

HTMLテンプレートでのng2-currency-maskの使用：

<input [(ngModel)]="model.value"
   [options]="{ prefix: 'R$ ', thousands: '.', decimal: ',' }"
   allowNegative="false" currencyMask>

そして、モデルのsaveの前のtsで：

if(this.model.value)
   this.model.value = numeral(this.model.value).value();

https://github.com/cesarrew/ng2-currency-mask

0
Richard Lee