angular - 在 Angular 的 中用逗号而不是点显示数值

Question

在我的模板中，我想用逗号而不是点作为小数分隔符来显示值(数字类型)。我有:

<p-column field="power" header="Power [MW]" [editable]="true">
  <ng-template let-col let-data="rowData" pTemplate="editor">
    <div>
      <input type="text" [(ngModel)]="data[col.field]" numbersOnly digits="35" decimals="3">
    </div>
  </ng-template>
  <ng-template let-col let-data="rowData" pTemplate="body">
    <div>
      <span>{{ data[col.field] }}</span>
    </div>
  </ng-template>
</p-column>

但这会在编辑器和显示模式下显示带点的数字，例如“10.3”。我需要的是用逗号显示值，比如“10,3”。我该怎么做？

Answer 1

我不得不用一个应用程序来解决这个问题，该应用程序从 SAP 接收所有数据，这些数据的格式也是 . 而不是 , 。这是我为解决这个问题而制作的管道，它比 adding a locale id 更多的开销并使用 native angular decimal pipe

Here is a working stackblitz example of the pipe

/**
 * @Pipe
 * @description pipe to format numeric values to argentina readable currency values
 * @input number
 * @output formatted numeric value
 */

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

@Pipe({ 
    name: 'numberFormat'
 })
export class NumberFormatPipe implements PipeTransform {
    transform(value: any): number {
        return this.localeString(value);
    }

    missingOneDecimalCheck(nStr) {
        nStr += '';
        const x = nStr.split(',')[1];
        if (x && x.length === 1) return true;   
        return false;
    }

    missingAllDecimalsCheck(nStr) {
        nStr += '';
        const x = nStr.split(',')[1];
        if (!x) return true;    
        return false;
    }

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

        /** If value was inputed by user, it could have many decimals(up to 7)
            so we need to reformat previous x1 results */
        if (x1.indexOf(',') !== -1) {
            y1 = x1.slice(x1.lastIndexOf(',')).replace(/\./g, '');

            y2 = x1.split(',');
            x = y2[0] +  y1;
        } else {
            x = x1 + x2;
            if (this.missingOneDecimalCheck(x)) return x += '0';
            if (this.missingAllDecimalsCheck(x)) return x += ',00';
        }

        return x;
    }
}

并像这样在您的模板中使用它:

{{ data[col.field] | numberFormat }}

或者在你的组件中

constructor(private format: NumberFormatPipe) {}
...
let result = this.format.transform(some_number);

不要忘记导入并添加到模块声明中:

declarations: [NumberFormatPipe]

请注意，此管道还包含一些代码来检查小数点，因为就我而言，我得到了带小数点和不带小数点的值，在某些情况下最多有 7 位小数，因此您可以按原样使用它或根据需要进行编辑...但我猜这至少会为您指明正确的方向。