数字管道给出字符串值而不是数字答案

【问题标题】：Number pipe gives string value instead of number数字管道给出字符串值而不是数字
【发布时间】：2017-07-21 07:09:28
【问题描述】：

我有以下几行代码。它基本上是我的html中的一个输入字段。我正在向它添加一个数字管道，因为它是一个货币字段。默认情况下它是空的，当用户为其添加价值时，它应该将其自动格式化为货币。但是我在这里遇到了一个罕见的问题。

vendor.dll.js:55094 例外：管道“DecimalPipe”的参数“8,888.038”无效

HTML：

<div class="form-input">
                    <cust-input
                            [ngModel]="Amnt | number:'.2-2'"
                            (ngModelChange)="Amnt=$event"
                            type="tel"
                            (keyup)="getAmount(RqstdAmnt)"
                            [ngClass]="{'inValid-requested-amount-class': AmountValid===false}"
                            placeholder="{{'amount_placeHolder' | translate}}">
                    </cust-input>
                </div>

TS：

RqstdAmnt:number;
getRequestedAmount(amount:number) {
        if (amount > somevalue) {
             console.log('value higher');
        } else {
             console.log('value lower');
        }
    }

我可以知道什么是正确的方法吗？我们可以有另一种方式，当用户点击输入字段时没有管道，当鼠标移出时添加货币管道。我不知道该怎么做。你们能指导我怎么做吗？提前致谢。

【问题讨论】：

如何在组件中声明字段 Amnt？
是的。那是我放在我的功能之上的那个

标签： javascript html angular pipe

【解决方案1】：

使用带有ngModel 的管道不是最好的主意，因为当用户键入时，管道将在每次击键时运行。我已经使用blur 和focus 实现了类似的场景。 .00 根据用户输入添加和删除，不会干扰交互。

如果你想在自己的代码中使用，这里是代码：

html:

<md-input-container class="example-full-width">
    <input mdInput placeholder="Amount" 
           type="number" 
           [(ngModel)]="amount" 
           formControlName="amount" 
           (blur)="format(amount)" 
           (focus)="remove(amount)">
  </md-input-container>

ts：

format(amt){
    // console.log(amt % 1 == 0);
    if(amt % 1 == 0){
      amt = amt + '.00';
      this.amount = amt;
    }
  }

  remove(amt){
    // console.log(amt % 1 == 0);
    if(amt % 1 == 0){
      this.amount = amt * 1;;
    }
  }

  submit(form){
    alert(JSON.stringify(form));
  }

Plunker demo

【讨论】：