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

正如马克上面评论的那样,你想要使用烟斗.您可以使用以下语法创建管道,然后使用组件装饰器上的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;
  ...
}

@R_675_9531@E

在这种情况下,我建议在输入上收听焦点和模糊事件

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