Pipe, ngModel und ngModelChange

Question

Ich habe eine Zwei-Wege-Datenbindung mit einer benutzerdefinierten Pipe.

Mein Eingabetextfeld Code:

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

und benutzerdefinierter Rohrcode:

@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; 

     } 

Wenn ich auf mein Eingabefeld Wert bearbeiten zeigt NaN auf Tastendruck.

Answer 1

Dies ist, weil Sie Zeichen $ an der Vorderseite von val haben, die von Ihrer benutzerdefinierten Rohr hinzugefügt. Entfernen Sie es vor dem Aufruf parseInt(data) wird Ihr Problem lösen.

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.