如何爲角度2.0中的數字設置區域設置

Question

瑞士德語中的數字格式類似於「100'000.00」（而不是「100,000.00」）。我該如何改變它？我試圖將number_pipe.js中的設置從en-US更改爲de-CH，但未成功。

var defaultLocale: string = 'de-CH';

是否有解決方法或我必須實現自己的管道？

Answer 1

嘗試使用locale-number.pipe.ts或

，你可以創建基於NumeralJs到數字格式的簡單管道

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

Answer 2

如果你只需要爲你的應用程序一個區域，你可以現在（ @angular〜2.4.0）在@NgModule中註冊區域設置提供程序。

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

Answer 3

以下是我的解決方案，這將有助於別人。

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。

Answer 4

對我來說最好的選擇是着名的https://www.npmjs.com/package/numeral包。

（他有相同邏輯的moment.js作品）要安裝它：

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

對於HTML模板，你可以創建：npm i numeral@2.0.6與類型npm i --save-dev @types/numeral@0.0.22

在你的ts文件，你可以如下使用一個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(); 
    } 
} 

此外，對於貨幣（和語言環境）一個好的策略是使用包ng2-currency-mask貨幣在HTML口罩（但ts文件，你可能之前應該保存你的模型對象「翻譯」與numeral模型綁定的值。

在HTML模板使用ng2-currency-mask：

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

而且在ts保存模型前：

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

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