添加逗號分隔數千到輸入數在Angular2

在角2如何將添加數千分離器，用於數字輸入控制，因此，例如添加逗號分隔數千到輸入數在Angular2

在模型值1000

當光標不在輸入控制顯示分離器（例如1,000）

當編輯值（在輸入控制內部控制即光標），它應該除去逗號允許值可以很容易地編輯

由於

來源

2016-02-09 Chris Small

創建一個管道：https://angular.io/docs/ts/latest/guide/pipes.html –

正如馬克評論上面你想要使用管道。您可以使用以下語法創建一個管道，然後簡單地使用該組件裝飾的pipes物業管添加到您的組件。

@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

在這種情況下，我建議聽的重點和模糊事件的輸入

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

來源

2016-02-09 23:42:50 SnareChops

對不起，我已經更新了這個問題，使它對我所需的行爲更清晰一些。謝謝 –

已更新答案，儘管我仍然覺得您的實際使用案例不清楚，也許您可以將它們合併爲您正在查找的內容，或者請完整詳細地描述您從開始到結束時所要查找的行爲。 – SnareChops

感謝此更新正是我正在尋找的內容，我只需將其製作爲可用於所有數字輸入的可重新啓動的組件。謝謝。 –

-1

我認爲這是一個清晰的解決方案：

在app.modules.ts進口LOCALE_ID

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

和定義供應商這樣的：

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

這將自動控制的分隔符

來源

2017-08-18 06:01:02 kabus

看起來不錯，不工作。 – Blauhirn

它對我來說非常合適。 – kabus

好的，那麼這可能是特定於語言環境的嗎？我試過EN和DE兩者都不會在數字輸入中添加任何分隔符。 '1000'保持'1000'並且不變成'1,000'。（也討論[這裏]（https://github.com/angular/angular.js/issues/10146）） - 編輯這是angularJS，但角度可能相同。 – Blauhirn

-1

數：0已經在這樣做，你可以代替0使用「1.2-2」這增加了逗號根據文化。

來源

2017-12-19 13:31:31 manish

爲您的答案添加一些更多細節。 – Billa

添加逗號分隔數千到輸入數在Angular2

回答

相關問題