在 Angular 中用逗号而不是点显示数字值<p-column>

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接收所有数据，数字格式为.而不是,。这是我为解决这个问题而制作的管道，它比添加区域设置 ID 和使用本机角度十进制管道的开销更大

这是管道的工作堆栈闪电示例

/**
 * @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 位小数，因此您可以按原样使用它或根据需要对其进行编辑......但我的猜测是，这至少会为你指明正确的方向。

Answer 2

您可以随时将输入字段类型更改为数字

  <input type="number" [(ngModel)]="data[col.field]" numbersOnly digits="35" decimals="3">

它将自动强制它只接受数字。

然后，如果您不需要向上和向下箭头，则可以使用此CSS来隐藏箭头

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

然后，您可以强制角度使用特定的区域设置。

app.module.ts(适用于瑞典语区域设置(

import localeSv from '@angular/common/locales/sv';
import localeSvExtra from '@angular/common/locales/extra/sv';
registerLocaleData(localeSv, 'sv-SE', localeSvExtra)

现在所有数字都神奇地用"，"表示，如果您将其绑定到模型，它将可以绑定到数字类型的字段，没有任何问题

Answer 3

您只需编写一个角度过滤器即可做到这一点，该过滤器将为您用逗号替换点，就像我在小提琴中提到的那样。

注意：现在我使用静态值进行演示。您可以将其替换为原始模型值。

var app = angular.module('myapp',['angular.filter'])
app.controller('myController',['$scope',function($scope){
$scope.my_modal = 0;
}])
app.filter('replaceWithComma', function () {
return function (text) {
if(text != undefined) {
var str = text.toString().replace(".", ",");
return str;
}
};
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.11/angular-filter.min.js"></script>
<div ng-app="myapp" ng-controller="myController">
<p-column field="power" header="Power [MW]" [editable]="true">
  <ng-template let-col let-data="rowData" pTemplate="editor">
    <div>
      <input type="text" ng-model="my_modal" numbersOnly digits="35" decimals="3">
    </div>
  </ng-template>
  <ng-template let-col let-data="rowData" pTemplate="body">
    <div>
      <span>{{ my_modal | replaceWithComma }}</span>
      <br>Also check with static value:<br>
      <span>{{ 10.30 | replaceWithComma }}</span>
    </div>
  </ng-template>
</p-column>
</div>