从angular2中的数字管道中删除逗号

时间:2017-12-27 13:14:16

标签: angular angular-pipe

我是Angular 2的初学者。我试图使用angular显示一些数据。这是我的代码部分:

  <span>Value :</span> <span>{{myvalue| number : '1.2-2'}}</span>

以上部分将显示值,例如:&#34; 124,500.00&#34;。没问题,但我需要删除逗号并显示数据仅为124500.00。这也不是货币类型。

我尝试了类似这样的事情并且无法正常工作

   <span>Value :</span> <span>{{myvalue| number: '.2-3''}}</span>

我该怎么做?我可以使用任何自定义管道吗?

提前致谢

4 个答案:

答案 0 :(得分:13)

实际上,看起来DecimalPipe没有直接参数来更改或删除小数点。编写自己的管道以删除小数点可能是最好的。

您可以编写自己的管道来完全替换当前使用的DecimalPipe(所有内容都使用单个管道),也可以编写一个管道,在使用DecimalPipe(链接管道)后删除逗号。最后一个选项可能看起来像这样(我从this回答了代码,所以对Adrien的问候)。

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

@Pipe({
  name: 'noComma'
})
export class NoCommaPipe implements PipeTransform {

  transform(val: number): string {
    if (val !== undefined && val !== null) {
      // here we just remove the commas from value
      return val.toString().replace(/,/g, "");
    } else {
      return "";
    }
  }
}

您可以像这样链接管道。

 <span>Value :</span> <span>{{myvalue| number : '1.2-2' | noComma}}</span>

请记住在模块中声明管道。

答案 1 :(得分:2)

更改了REPLACE参数,以便删除所有逗号(10,000,000 = 10000000),否则我最终得到(10,000,000 = 10000,000)。按照Benedikt的说法,其他所有操作都很好。

@Pipe({
    name: 'noComma'
})
export class NoCommaPipe implements PipeTransform {

 transform(val: number): string {
  if (val !== undefined && val !== null) {
    // here we just remove the commas from value
    return val.toString().replace(/,/g, "");
  } else {
    return "";
  }
 }
}

答案 2 :(得分:0)

角度数字使用小数位数管道,此解决方案适用于角度2及更高的角度

https://angular.io/api/common/DecimalPipe

由于使用的是语言环境,因此您必须更改语言环境以更改管道显示它的方式

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';

// the second parameter 'fr' is optional
registerLocaleData(localeFr, 'fr');

以供参考:https://angular.io/guide/i18n#i18n-pipes

答案 3 :(得分:-3)

为了去掉小数点,我的做法是:

{{ someNumber | number : '1.0-0' }}