在angular4的输入字段中添加一千个分隔符 [英] adding a thousand separator to a input field in angular4

问题描述

我在前端使用4号角，我想在输入字段中插入一千个分隔符.我尝试了这段代码，但是没有用

I'm using angular 4 for my front end.I want to insert a thousand seperator to a input field. I tried this code but its not working

   <input type="number" class="form-control" id="amount" placeholder="Amount" name="Amount" [ngModel]="Amount | number:'3.2-2'" (keypress)="onlyNumberKey($event)">

这是我的component.ts代码

here is my component.ts code

export class CustomerDepositApplicationComponent implements OnInit {

Amount: any;

请帮助我.

推荐答案

您不能添加这样的管道.您需要做的是，在 ts 中正确设置电话号码的格式并将其绑定.

You can't add pipes like that. What you have to do is, format your number properly in the ts and bind it.

numeraljs 是用于这种情况的一个非常好的库.

numeraljs is a really good library for this kind of scenarios.

让我用它来创建一个堆叠闪电战.

Let me create a stackblitz using that.

更新

我创建了简单的 stackblitz .请看一看.由于stackblitz中的要求问题，我无法以任何方式将数字包导入stackblitz中.但是，如果使用数字，这会更容易.

I created simple stackblitz. Please have a look. Any way I couldn't import numeral package into stackblitz due to require issue in stackblitz. But this is way more easy if you use numeral.

在此示例中，我使用了.toLocaleString();功能，其中JS自动检测浏览器区域并适当地转换您的编号.例如，如果您的浏览器语言环境 zh-CN ，数字的格式将为15,000.如果是nb-NO，则数字的显示方式可能会不同.

In this sample I used .toLocaleString(); functionality where JS automatically detects the browser region and convert your number appropriately. Eg if your browser locale en-US, number will format like 15,000. If it's nb-NO number may looks different way.

这篇关于在angular4的输入字段中添加一千个分隔符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！