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>

但这会显示带点的数字，例如＆＃34; 10.3＆＃34;在两者中：编辑器和显示模式。我需要的是用逗号显示值，例如＆＃34; 10,3＆＃34;。我怎么能这样做？

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位小数，所以你可以按原样使用它或根据你的需要编辑它......但我猜这至少会指向正确的方向。

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)

现在所有的数字都被神奇地表示为＆＃39;，＆＃39;如果你将它绑定到你的模型，它将可以绑定到数字类型的字段而没有任何问题

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>

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

3 个答案: