Question

我将Angular 2项目更新为Angular 4.我正在使用如下的管道。

<input  type="text" class="form-control" [ngModel]="customerSearchText | isnumber" (ngModelChange)="customerSearchText=$event">

customerSearchText声明

public customerSearchText: number;

isnumber.pipe

@Pipe({ name: 'isnumber'})
export class IsNumberPipe implements PipeTransform {
  transform(val: string): any {
    if(!val) return '';
    val=val.toString();
    return WrappedValue.wrap(val.replace(/\D/g, ''))
  }
}

当我这样使用时，我收到了错误。

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '[object Object]'. Current value: '4'

当我从输入中删除管道时，错误消失了。但我想控制是输入数字。

我该如何解决这个问题？

Answer 1

我认为这是由于您对(ngModelChange)事件的即时分配所致。尝试调用组件中定义的函数，而不是直接在该事件的模板中进行赋值，如下所示，

在模板中，

<input  type="text" class="form-control" [ngModel]="customerSearchText | isnumber" (ngModelChange)="inputChanged($event)">

在你的组件中，

inputChanged(value: string): void {
   this.customerSearchText = value;
}

希望它有所帮助。

如果没有解决问题，请尝试使用WrappedValue.wrap将''（空字符串）return包装在管道中，如return WrappedValue.wrap('');中所示。

Angular 2管道绑定导致ExpressionChangedAfterItHasBeenCheckedError

1 个答案: