Angular 如何为角度4中的数字管道指定区域设置分隔符

如何为角度4中的数字管道指定/覆盖默认（区域设置）千分隔符，例如

{{p.total | number}}

？角度5+ 从Angular 5开始，在decimal管道中添加了区域设置参数，如官方文档中所示：。这意味着您可以在调用管道时直接选择区域设置，例如：

{p.total}编号：''fr-fr'}

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

---

角度2+ 或者如果您只想更改千位分隔符

根据Angular关于DecimalPipe:的文档，没有可以添加到管道调用中的显式参数来异常更改用于格式化的字符

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

从'@angular/core'导入{Pipe，PipeTransform}；
@烟斗({
姓名：'numberfr'
})
导出类FrenchDecimalPipe实现PipeTransform{
转换（val:number）：字符串{
//格式化输出以在此处以任何方式显示。
//例如：
如果（val！==未定义&&val！==空）{
返回val.tolocalString（/*您需要的参数*/）；
}否则{
返回“”；
}
}
}

---

不要忘了将其添加到NgModule中以使用它。

以下是我的解决方案，它将对其他人有所帮助

从“@angular/core”导入{Pipe，PipeTransform}；
@烟斗({
名称：'amountConverter'
})
导出类AmountConverterPipe实现PipeTransform{
转换（值：数字|字符串，区域设置？：字符串）：字符串{
返回新的Intl.NumberFormat（区域设置{
最小分数位数：2
}).格式（数字（值））；
}
}

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

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

{{Price | amountConverter:locale}

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

---

有关更多详细信息，请参阅。

电话号码：1234567

使用以下管道：

{{element.total}个数：'.2'}

为了生产1234567.00

并使用以下管道：

{{element.total | number:'2.}

为了摆脱多余的0并产生1234567

----------------------------------------------------------------------------------------------------

请注意，“2.”表示小数点后的整数数量

例如，当使用此管道将值0加载到表中时，显示的值将为“00”（因为“2”）

---

若要解决此问题，请在输入值为0时使用“1”。

您可以使用区域设置，就像本例中使用Angular 6.0.2测试的那样：

卡组件.ts

从'@angular/common'导入{registerLocaleData}；
从“@angular/common/locales/es”导入es；
从“@angular/core”导入{Component，OnInit}；
@组件（{
选择器：“应用程序卡”，
templateUrl:“./card.component.html”，
样式URL:['./card.component.css']
} )
导出类CardComponent实现OnInit{
数值=1234567.987；
构造函数（）{}
恩戈尼尼特（）{
注册本地数据（es）；
}
}

卡组件.html

{{value}编号：''es'}

---

您可以在和官方文档中查看其他可能性。

我知道这可能会很晚，但希望能有所帮助。角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/core'导入{Pipe，PipeTransform}；
@管道（{name:'seperator'}）
导出类seperator实现PipeTransform{
构造函数（）{
}
转换（值：字符串，单位：字符串）：字符串{
如果（值==未定义）
{
返回“”；
}
设n=parseInt（值）；
常数rx=/（\d+）（\d{3}）/；
返回字符串（n）.replace（/^\d+/），函数（w）{
var-res=w；
同时（接收测试（res））{
res=res.更换（rx，'1٬$2'）；
}
返回res；
});
}
}

我实现这一点是出于我的目的。 例如：-12345.67=>12345.67

首先，我使用

ng g PIpe pipes/thounandseparator

生成了一个管道，并对该文件进行了如下编辑

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中的provider中

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>

{{值|千分位}

我不认为有可能重复。我认为OP并不是在寻找一种改变默认分隔符的方法，而是给管道一个参数来指定一个例外的分隔符。不幸的是，对于Angular的DecimalPipe，后者是不可能的。不过，你可以自己编写管道。这里有一个问题。加入并支持它。对于大数字，toLocaleString失败。e、 g.大于9007199254740991。因为不止这些是不安全的JS数值。@Shantanu，哇，刚刚了解了这个JS限制，谢谢！看起来，如果超出了

MAX\u SAFE\u INTEGER

，那么除了格式化函数之外，您还需要担心更多的问题。有什么建议可以改进我的答案吗？如果我需要得到类似于

1,23455667

的值怎么办？@PardeepJain，那么您可以根据

转换

方法中查找的格式对逻辑进行编码。但是我认为关于这样一个实现的细节超出了这个SO线程的范围。@AdrienBrunelat是的，但是我认为你可能是实现了这里所问的同一个管道，无论如何，谢谢这是关于小数分隔符的回答，但问题是关于千分隔符。当使用“数字”管道时，你得到了成千上万的分离机但问题