hinzufügen Comma Tausende zu Anzahl Eingängen in Angular2

Question

In Angular 2 getrennt, wie würde ich Tausender-Trennzeichen für Zahleneingabe Steuerelemente hinzufügen, so zum Beispiel

Wert in Modell 1000

Wenn Cursor nicht in Eingangssteueranzeige Separator (zB 1000)

Beim Bearbeiten Wert (dh Cursor innerhalb Steuerung) in Eingangssteuer, sollte es Kommata entfernen der Wert zu erlauben, leicht

Dank bearbeitet werden

Answer 1

Wie oben erwähnt, möchten Sie eine Pipe verwenden. Sie können eine Pipe mit der folgenden Syntax erstellen und dann einfach die Pipe zu Ihrer Komponente hinzufügen, indem Sie die pipes -Eigenschaft auf dem Komponenten-Decorator verwenden.

@Pipe({name: 'commaSeparatedNumber'}) 
export class CommaSeparatedNumberPipe implements PipeTransform { 
    transform(value:number, args:string[]) : any { 
    return // Convert number to comma separated number string 
    } 
} 

@Component({ 
    ... 
    template: ` 
    <div *ngIf="!editing">{{number | commaSeparatedNumber}}</div> 
    <input type="number" [(ngModel)]="number" /> 
    `, 
    pipes: [CommaSeparatedNumberPipe] 
}) 
class MyComponent{ 
    public editing: boolean; 
    public number: number; 
    ... 
} 

UPDATE

In diesem Fall würde ich auf dem Eingang zu dem Fokus und Unschärfe Ereignisse hören empfehlen

@Component({ 
    ... 
    template: `<input type="text" [(ngModel)]="number" 
       (focus)="removeCommas()" (blur)="addCommas()" />` 
}) 
class MyComponent{ 
    number: string; 

    removeCommas(){ 
    this.number = this.number.replace(',', ''); 
    } 

    addCommas(){ 
    this.number = // Convert number to comma separated number string 
    } 
} 

Answer 2

Ich denke, dass dies eine sauberere Lösung ist:

Importieren Sie LOCALE_ID in app.modules.ts

import {ErrorHandler, NgModule, LOCALE_ID} from '@angular/core'; 

und Anbietern wie folgt definieren:

providers: [ 
    PouchServiceProvider, 
    DbProvider, { 
     provide: LOCALE_ID, 
     useValue: "nl-NL" 
    } 
    ] 

Dies wird Selbststeuerung der seperator

Answer 3

Nummer: 0 bereits tun, dass Sie 1.2-2 'verwenden, können anstelle von 0. Dies fügt Komma nach Kultur.