在Angular 2中,如何为数字输入控件添加数千个分隔符,例如
1000型的价值
当光标不在输入控件显示分隔符(例如1,000)时
在输入控件中编辑值(即光标内控件)时,应删除逗号以便轻松编辑该值
谢谢
解决方法
正如马克上面评论的那样,你想要使用烟斗.您可以使用以下语法创建管道,然后使用组件装饰器上的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
}
}
