角度2管道綁定導致ExpressionChangedAfterItHaHasBeenCheckedError

Question

我將Angular 2項目更新為Angular4。我正在使用如下所示的Pipe。

<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(''); 。