web-dev-qa-db-ja.com

angular2の数値パイプからカンマを削除する

私はAngular 2。

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

上の部分には、たとえば「124,500.00」のように値が表示されます。その大丈夫ですが、コンマを削除してデータを124500.00のみとして表示する必要があります。また、これは通貨タイプではありません。

私はこのようなことを試しましたが機能しません

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

カスタムパイプを使用できますか？

前もって感謝します

angularangular-pipe
12
Jithin j

実際、小数点を変更または削除するための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>

モジュールでパイプを宣言することを忘れないでください。

20
Benedikt Schmidt

すべてのコンマが削除されるようにREPLACE引数を変更しました（10,000,000 = 10000000）。それ以外の場合は（10,000,000 = 10000,000）になります。他のすべてはベネディクトに従ってうまくいきました。

@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
Gabriel O

角数はdecimalPipeを使用します。このソリューションはangular 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

0
sancelot