管道、ngModel 和 ngModelChange

Question

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

我输入的文本字段代码：

<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, ",");
        return num;

      }

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

Answer 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, ",");
  return num;
}

plinker demo.

管道、ngModel 和 ngModelChange

Pipe, ngModel and ngModelChange

pipe

nan

ngmodel

angular