如何为角度2.0中的数字设置区域设置

问题描述：

瑞士德语中的数字格式类似于“100'000.00”（而不是“100,000.00”）。我该如何改变它？我试图将number_pipe.js中的设置从en-US更改为de-CH，但未成功。如何为角度2.0中的数字设置区域设置

var defaultLocale: string = 'de-CH';

是否有解决方法或我必须实现自己的管道？

答

尝试使用locale-number.pipe.ts或

，你可以创建基于NumeralJs到数字格式的简单管道

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

答

如果你只需要为你的应用程序一个区域，你可以现在（ @angular〜2.4.0）在@NgModule中注册区域设置提供程序。

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

您必须添加：进口{LOCALE_ID}从“@角/芯'; –

答

以下是我的解决方案，这将有助于别人。

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。

答

对我来说最好的选择是着名的https://www.npmjs.com/package/numeral包。

（他有相同逻辑的moment.js作品）要安装它：

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

对于HTML模板，你可以创建：npm i [email protected]与类型npm i --save-dev @types/[email protected]

在你的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

如何为角度2.0中的数字设置区域设置

相关推荐