Angular 2 Pipe Binding Ursache ExpressionChangedAfterItHasBeenCheckedError

Question

Ich aktualisierte Angular 2 Projekt zu Angular 4. Ich verwende Pipe wie unten.

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

customerSearchText Erklärung

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, '')) 
    } 
} 

Als ich so benutzten ich Fehler immer bin.

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

Als ich Rohr von meiner Eingabe löschte, ist der Fehler weg. Aber ich will Kontrolle ist Eingangsnummer.

Wie kann ich dieses Problem lösen?

Answer 1

Ich denke, das passiert aufgrund der sofortigen Zuweisung, die Sie mit dem (ngModelChange) Ereignis haben. Versuchen Sie, eine Funktion in der Komponente definiert Aufruf, anstatt direkt die Zuordnung in der Vorlage zu tun für dieses Ereignis, wie diese,

in Vorlage,

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

in Ihrer Komponente,

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

Hoffnung es hilft.

Wenn es nicht beheben, dann versuchen Sie Ihre '' (leere Zeichenkette) Umwickeln return in der Pfeife mit WrappedValue.wrap wie in return WrappedValue.wrap('');.