Question

如何在Angular 4中为数字管道指定/覆盖默认（语言环境）千位分隔符，例如？

{{p.total | number}}

Answer 1

Angular 5 +

从Angular 5开始，在官方文档中可以看到一个locale参数已添加到十进制管道中：https://angular.io/api/common/DecimalPipe。这意味着您可以在调用管道时直接选择语言环境，例如：

{{p.total | number:'':'fr-FR'}}

请注意，这也会更改小数点分隔符。

Angular 2 +

或者如果您只想更改千位分隔符...

根据Angular关于DecimalPipe的文档：https://v2.angular.io/docs/ts/latest/api/common/index/DecimalPipe-pipe.html，没有明确的参数可以添加到管道调用中以异常地更改用于格式化的字符。

如果您不想更改整个项目的区域设置或关联的默认值，我认为您最好的方法是编写自己的管道来处理您的特殊情况。不用担心，管道非常容易编写。

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中以使用它。

Answer 2

编号：1234567

使用以下管道：

{{element.total |号码：＆＃39; .2＆＃39;}}

为了产生 1,234,567.00

并使用以下管道：

{{element.total |号码：＆＃39; 2。＆＃39;}}

为了摆脱额外的0并产生 1,234,567

<强> -------------------------------------------- --------------------------------------------

请注意＆＃39; 2。＆＃39;表示小数后的整数。

例如，当使用此管道在表格中加载值0时，显示的值将为＆＃39; 00＆＃39; （因为＆＃39; 2。＆＃39;）

要解决此问题，请使用＆＃39; 1。＆＃39;相反，当输入值为0时。

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

}

通过更改minimumFractionDigits的值可以更改位数。在html中，您可以使用如下

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

数字格式将根据区域设置的值更改。

请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat了解更多详情。

Answer 4

您可以使用区域设置，就像在此示例中使用 Angular 6.0.2 进行测试一样：

<强> card-component.ts

import { registerLocaleData } from '@angular/common';
import es from '@angular/common/locales/es';
import { Component, OnInit } from '@angular/core';

@Component( {
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: [ './card.component.css' ]
} )
export class CardComponent implements OnInit {

  value = 1234567.987;

  constructor() { }

  ngOnInit() {
    registerLocaleData( es );
  }

}

<强> card-component.html

<!-- result: 1.234.567,987 -->
<span>{{ value | number:'':'es' }}</span>

您可以在https://angular.io/api/common/DecimalPipe和https://angular.io/guide/i18n#setting-up-the-locale-of-your-app官方文档中查看其他可能性。

Answer 5

您可以为此编写一个自定义管道。

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

@Pipe({name: 'seprator'})
export class Seprator implements PipeTransform {
  
  constructor() {

  }

  transform(value: string, unit: string): string {

    if(value == undefined)
    {
        return '';
    }
    let n = parseInt(value);

    const rx =  /(\d+)(\d{3})/;
    return String(n).replace(/^\d+/, function (w) {
        var res = w;
        while (rx.test(res)) {
            res = res.replace(rx, '$1٬$2');
        }
        return res;
    });

  }
}

Answer 6

您可以使用名为 ng2-currency-mask

的库

通过命令安装软件包：

npm install ng2-currency-mask --save

导入模块：

import { CurrencyMaskModule } from "ng2-currency-mask";

@NgModule({
    imports: [
        ...
        CurrencyMaskModule
    ],
    declarations: [...],
    providers: [...]
})
export class AppModule {}

您可以如下设置千位分隔符和语言环境选项：

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

Answer 7

我出于自己的目的实施了此操作。例如：-12345.67 => 12,345.67

首先，我使用ng g pipe pipes/thousandSeparator生成了一个PIpe，然后像这样编辑该文件

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

@Pipe({
  name: 'thousandSeparator'
})
export class ThousandSeparatorPipe implements PipeTransform {

  transform(nStr: any): any {
    if (nStr === '') { return ''; }
    let x, x1, x2, rgx;
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x[1];
    rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + (x2 ? `.${x2}` : '');
  }
}

我也将其添加到app.module.ts中的提供程序中

providers: [ThousandSeparatorPipe]

然后，我可以像这样使用它。

在组件中

import { Component, OnInit } from '@angular/core';
import { ThousandSeparatorPipe } from 'src/app/pipes/thousand-separator.pipe';

@Component({
  selector: 'app-my',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.scss']
})
export class MyComponent implements OnInit {

  value = 12345.67;

  constructor(private thousandSeparator: ThousandSeparatorPipe) { }

  ngOnInit() {
    console.log(this.thousandSeparator.transform(this.value));
  }

}

以html

<p>{{value | thousandSeparator}}</p>

Answer 8

在模板中使用具有区域设置的数字管道：

{{myDigit | number:'':'en'}}

如果要配置，第一个''用于十进制。

Answer 9

我知道这可能会晚了，但希望对您有所帮助。角度2及以上

import { DecimalPipe } from '@angular/common';
import { Component, OnInit } from '@angular/core';

@Component( {
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: [ './card.component.css' ]
} )
export class CardComponent implements OnInit {

 value = 1234567.987;

 constructor(private decimalPipe: DecimalPipe) { }

 ngOnInit() {
   //here is how to get it
   let newValue = this.decPipe.transform(this.value, '.2');
   //you can now use the newValue
   }

 }

如果要使用html，只需执行以下操作：

{{ value | number: '.2'}}

如何在Angular 4中为数字管道指定千位分隔符

9 个答案:

Angular 5 +

Angular 2 +