Aggiungi Comma Separated Migliaia al numero di ingressi in Angular2

Question

In angolare 2 come vorrei aggiungere migliaia di separazione per i controlli di input il numero, così per esempio

valore nel modello 1000

Quando il cursore non è in separatore di display di controllo di input (ad esempio 1.000)

Quando si modifica valore (cioè cursore all'interno controllo) nel controllo di input, si dovrebbe rimuovere virgole per consentire il valore di essere facilmente modificati

Grazie

Answer 1

Come Mark ha commentato sopra, si desidera utilizzare una pipe. È possibile creare un tubo usando la seguente sintassi, quindi aggiungere semplicemente il tubo al componente usando la proprietà pipes sul decoratore del componente.

@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 questo caso mi sento di raccomandare ad ascoltare gli eventi di attivazione e di sfocatura sull'ingresso

@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

Penso che questa sia una soluzione più pulita:

Importa LOCALE_ID in app.modules.ts

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

e definire in fornitori in questo modo:

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

Questo controllo automatico volontà il separatore

Answer 3

numero: 0 già facendo che si può utilizzare '1.2-2' al posto di 0. Questo aggiunge una virgola come da cultura.