typescript 角度 2 中的千位分隔符

separators of thousands in angular 2

提问by Daniel

i have tried this one in my proyect:

我在我的项目中尝试过这个：

<div padding *ngIf="TotalAPagar">
    $ {{TotalAPagar | number }}  
</div>

my variable is called TotalAPagar, and I'm using number pipe, but it shows the value like this 1,000,500.

我的变量被称为TotalAPagar，我使用的是数字管道，但它显示的值是1,000,500。

I need that to change the numbering convention to dots. Eg. 1.000.000

我需要将编号约定更改为dots. 例如。1.000.000

I have been reading about in the docs in angular but doesn't have any example.

我一直在阅读有关角度的文档，但没有任何示例。

采纳答案by Daniel

?After reading in forums and docs about angular js y javascript i found a method that puts the numbers in format and currency, that method is toLocaleString(), is a method from javascript that helps to put it in the currency or languaje that you need.

?在阅读了有关 angular js y javascript 的论坛和文档后，我发现了一种将数字置于格式和货币中的方法，该方法是 toLocaleString()，是一种来自 javascript 的方法，可帮助将其放入所需的货币或语言中.

i search the name of the country that i need with the method and show me the info that need about. (http://www.localeplanet.com/icu/es-CO/), In my case was colombia.

我使用该方法搜索我需要的国家/地区名称，并向我显示需要的信息。（http://www.localeplanet.com/icu/es-CO/），就我而言是哥伦比亚。

in my functions i just have to add the .toLocaleString('es-CO') to the result and put the value with the specified currency.

在我的函数中，我只需要将 .toLocaleString('es-CO') 添加到结果中，并将值与指定的货币相加。

for example:

例如：

this.TotalAPagar = (this.calcularDescuentosLiquidacion(this.TotalDevengadoValor, this.sueldoPendientePorCancelarValor, this.item.libranza, this.item.prestamo_empleado)+ this.calcularIndemnizacion(this.item.promedio_salario, this.item.fecha_fin_contrato, this.item.fecha_inicio_contrato)).toLocaleString('es-CO');

this.TotalAPagar = (this.calcularDescuentosLiquidacion(this.TotalDevengadoValor, this.sueldoPendientePorCancelarValor, this.item.libranza, this.item.prestamo_empleado)+ this.calcularIndemnizacion(this.item.promedio_salario, this.traitem_salario, this. fecha_inicio_contrato)).toLocaleString('es-CO');

回答by Jaroslaw K.

I think that there are two ways to resolve this problem:

我认为有两种方法可以解决这个问题：

---

---

1. You can trying overwrite DecimalPipe from @angular/commonlibrary:

1. 您可以尝试从@angular/common库覆盖 DecimalPipe ：

In this way:

这样：

point-replacer.pipe.ts

点replacer.pipe.ts

import { Pipe } from '@angular/core';
import {DecimalPipe} from "@angular/common";

@Pipe({
    name: 'pointReplacer'
})
export class PointReplacerPipe extends DecimalPipe {

  transform(value: any, digits?: string): string {
        return super.transform(value, digits).replace(',', '.');


    }
}

and in your html code:

并在您的html 代码中：

<div padding *ngIf="TotalAPagar">
    $ {{TotalAPagar | pointReplacer }}  
</div>

---

---

2. You can write your own pipe, which replaces characters and use **double pipein your html code**

2.你可以自己写管道，替换字符并在你的html代码中使用**双管道**

Try in this way:

以这种方式尝试：

point-replacer.pipe.ts

点replacer.pipe.ts

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

@Pipe({
    name: 'pointReplacer'
})

export class PointReplacerPipe implements PipeTransform {
    transform(value: string, args: any[]): string {
        if(value) {
          return value.replace(',', '.');
        }
        return '';
    }
}

and in your html code:

并在您的html 代码中：

<div padding *ngIf="TotalAPagar">
    $ {{TotalAPagar | number | pointReplacer }}  
</div>

---

---

No matter which method you choose, don't forget to declare your own pipe in module, where you use it:

无论您选择哪种方法，都不要忘记在模块中声明您自己的管道，您在哪里使用它：

@NgModule({
  declarations: [PointReplacerPipe],
  providers: [PointReplacerPipe]
}) 

回答by kabus

I think that this is a cleaner solution:

我认为这是一个更清洁的解决方案：

Import LOCALE_ID in app.modules.ts

在 app.modules.ts 中导入 LOCALE_ID

import {ErrorHandler, NgModule, LOCALE_ID} from '@angular/core';

and define in providers like this:

并在提供者中定义如下：

  providers: [
    PouchServiceProvider,
    DbProvider, {
      provide: LOCALE_ID,
      useValue: "nl-NL"
    }
  ]

this will auto choose the seperator id, based on local_id

这将根据 local_id 自动选择分隔符 ID