管道、ngModel 和 ngModelChange答案

【问题标题】：Pipe, ngModel and ngModelChange管道、ngModel 和 ngModelChange
【发布时间】：2017-06-07 06:26:19
【问题描述】：

我有一个带有自定义管道的双向数据绑定。

我的输入文本域代码：

<input type="text" [ngModel]="post.price | myCurrencyPipe" (ngModelChange)="post.price = $event" name="price" id ="price" (change)="itemPriceUpdate(post)"/>

和自定义管道代码：

@Pipe({ name: 'myCurrencyPipe'})
export class MyCurrencyPipe implements PipeTransform{

      transform(val:any) {
        var value = parseInt(data);
        var num = '$' + value.toFixed(2).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
        return num;

      }

当我去编辑我的输入字段值时，它会在按键上显示 NaN。

【问题讨论】：

标签： angular pipe nan ngmodel

【解决方案1】：

这是因为您在val 前面有字符$，它是由您的自定义管道添加的。在调用parseInt(data) 之前删除它会解决您的问题。

transform(val:any) {
  val = val.toString().replace(/[^0-9.]/g, '');
  if (val === '') return '';
  var value = parseInt(val);
  var num = '$' + value.toFixed(2).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
  return num;
}

plinker demo.

【讨论】：

感谢您的帮助。我按照你的指示试过了。输入字段中仍然存在 NAN 问题。现在我在自定义管道中添加了额外的条件，它现在在输入字段中显示 nan。 if(isNaN(val)){ var num1='';返回数字1； }
parseInt的@SalmaKona参数必须是number的类型，否则会被转换成NAN。
感谢@Pengyy 的帮助。
@SalmaKona 您可以使用我提供的 plunker 分叉并重现您的问题。并告诉我什么操作会导致NAN。
@SalmaKona 我想我明白你的意思了。 :-) 当你清除整个值也会导致parseInt 失败。抱歉，我没有意识到这一点。