在Angular2中添加逗号分隔数千个数字输入

发布时间：2020-12-17 17:34:56 所属栏目：安全来源：网络整理

导读：在Angular 2中,如何为数字输入控件添加数千个分隔符,例如 1000型的价值当光标不在输入控件显示分隔符(例如1,000)时在输入控件中编辑值(即光标内控件)时,应删除逗号以便轻松编辑该值谢谢解决方法正如马克上面评论的那样,你想要使用烟斗.您可以使用以下语

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!