Angular 如何在内联编辑且仍处于焦点时设置剑道角度网格的货币格式？

如果我有剑道网格，我可以在剑道网格列上使用format=“{0:c}”以货币格式显示数字。但是，当我内联编辑此列并且网格列处于焦点时，货币格式不再正确显示，相反，在焦点中，它的行为只是一个简单的数字输入，可以接受任何数字或小数量。一旦我从该输入中模糊，货币格式将再次正确显示

我想知道是否有一种方法可以在内联编辑时保持货币格式，而重点是输入

在我的例子中（我取自剑道的文档并简化了），我点击价格栏中的一个项目，它是$22.00，我可以在编辑时将$22.985094385043950439添加到输入中。当我模糊时，它变成了$22.99，但是我不想允许用户超过2位小数（USD），即使他们正在编辑并且焦点在列上

此外，这将必须全球化，因此它必须以这种方式对待当地货币，而不仅仅是美元。我已经尝试在编辑处理程序和valueChange事件处理程序中使用来自“@telerik/kendo intl”的formatNumber（），但没有达到预期效果

即使在编辑列时，如何维护货币格式

import { Observable } from 'rxjs/Observable';
import { Component, OnInit, Inject } from '@angular/core';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';

import { GridDataResult } from '@progress/kendo-angular-grid';
import { State, process } from '@progress/kendo-data-query';

import { Product } from './model';
import { EditService } from './edit.service';

import { map } from 'rxjs/operators/map';

@Component({
  selector: 'my-app',
  template: `
      <kendo-grid #grid
          [data]="view | async"
          [pageable]="true" [sortable]="true"
          (dataStateChange)="onStateChange($event)"
          (cellClick)="cellClickHandler($event)"
          (cellClose)="cellCloseHandler($event)"
          (cancel)="cancelHandler($event)"
          (save)="saveHandler($event)"
        >
        <ng-template kendoGridToolbarTemplate>
            <button kendoGridAddCommand>Add new</button>
            <button class='k-button' [disabled]="!editService.hasChanges()" (click)="saveChanges(grid);">Save Changes</button>
            <button class='k-button' [disabled]="!editService.hasChanges()" (click)="cancelChanges(grid);">Cancel Changes</button>
        </ng-template>
        <kendo-grid-column field="ProductName" title="Product Name"></kendo-grid-column>
        <kendo-grid-column field="UnitPrice" format="{0:c}" editor="numeric" title="Price"></kendo-grid-column>
            </kendo-grid>
  `
})
export class AppComponent implements OnInit {
  public view: Observable<GridDataResult>;
  public gridState: State = {
    sort: [],
    skip: 0,
    take: 10
  };

  public changes: any = {};

  constructor(private formBuilder: FormBuilder, public editService: EditService) {
  }

  public ngOnInit(): void {
    this.view = this.editService.pipe(map(data => process(data, this.gridState)));

    this.editService.read();
  }

  public onStateChange(state: State) {
    this.gridState = state;

    this.editService.read();
  }

  public cellClickHandler({ sender, rowIndex, columnIndex, dataItem, isEdited }) {
    if (!isEdited) {
      sender.editCell(rowIndex, columnIndex, this.createFormGroup(dataItem));
    }
  }

  public cellCloseHandler(args: any) {
    const { formGroup, dataItem } = args;

    if (!formGroup.valid) {
      // prevent closing the edited cell if there are invalid values.
      args.preventDefault();
    } else if (formGroup.dirty) {
      this.editService.assignValues(dataItem, formGroup.value);
      this.editService.update(dataItem);
    }
  }

  public addHandler({ sender }) {
    sender.addRow(this.createFormGroup(new Product()));
  }

  public cancelHandler({ sender, rowIndex }) {
    sender.closeRow(rowIndex);
  }

  public saveHandler({ sender, formGroup, rowIndex }) {
    if (formGroup.valid) {
      this.editService.create(formGroup.value);
      sender.closeRow(rowIndex);
    }
  }

  public removeHandler({ sender, dataItem }) {
    this.editService.remove(dataItem);

    sender.cancelCell();
  }

  public saveChanges(grid: any): void {
    grid.closeCell();
    grid.cancelCell();

    this.editService.saveChanges();
  }

  public cancelChanges(grid: any): void {
    grid.cancelCell();

    this.editService.cancelChanges();
  }

  public createFormGroup(dataItem: any): FormGroup {
    return this.formBuilder.group({
      'ProductID': dataItem.ProductID,
      'ProductName': [dataItem.ProductName, Validators.required],
      'UnitPrice': dataItem.UnitPrice,
      'UnitsInStock': [dataItem.UnitsInStock, Validators.compose([Validators.required, Validators.pattern('^[0-9]{1,3}')])],
      'Discontinued': dataItem.Discontinued
    });
  }
}

从'rxjs/Observable'导入{Observable}；
从“@angular/core”导入{Component，OnInit，Inject}；
从'@angular/forms'导入{Validators，FormBuilder，FormGroup}；
从“@progress/kendo angular grid”导入{GridDataResult}；
从'@progress/kendo data query'导入{State，process}；
从“./model”导入{Product}；
从“./edit.service”导入{EditService}；
从'rxjs/operators/map'导入{map}；
@组成部分({
选择器：“我的应用程序”，
模板：`
新增
保存更改
取消更改
`
})
导出类AppComponent实现OnInit{
公众观点：可见；
公共网格状态：状态={
排序：[]，
跳过：0，
拍摄时间：10
};
公共更改：any={}；
构造函数（私有formBuilder:formBuilder，公共editService:editService）{
}
public ngOnInit（）：void{
this.view=this.editService.pipe（map（data=>process（data，this.gridState））；
这个.editService.read（）；
}
公共状态更改（状态：状态）{
this.gridState=state；
这个.editService.read（）；
}
公共cellClickHandler（{sender，rowIndex，columnIndex，dataItem，iEdit}）{
如果（！i编辑）{
editCell（rowIndex，columnIndex，this.createFormGroup（dataItem））；
}
}
公共cellCloseHandler（参数：任意）{
const{formGroup，dataItem}=args；
如果（！formGroup.valid）{
//如果存在无效值，则阻止关闭已编辑的单元格。
args.preventDefault（）；
}else if（formGroup.dirty）{
this.editService.assignValues（dataItem，formGroup.value）；
this.editService.update（数据项）；
}
}
公共addHandler（{sender}）{
sender.addRow（this.createFormGroup（new Product（））；
}
公共cancelHandler（{sender，rowIndex}）{
sender.closeRow（行索引）；
}
公共存储处理程序（{sender，formGroup，rowIndex}）{
if（formGroup.valid）{
this.editService.create（formGroup.value）；
sender.closeRow（行索引）；
}
}
公共removeHandler（{sender，dataItem}）{
this.editService.remove（数据项）；
sender.cancell（）；
}
公共保存更改（网格：任意）：无效{
grid.closeCell（）；
grid.cancell（）；
this.editService.saveChanges（）；
}
公共更改（网格：任意）：无效{
grid.cancell（）；
this.editService.cancelChanges（）；
}
公共createFormGroup（数据项：任意）：FormGroup{
返回此.formBuilder.group({
“ProductID”：dataItem.ProductID，
'ProductName'：[dataItem.ProductName，验证器。必需]，
“单价”：dataItem.UnitPrice，
“UnitsInStock”：[dataItem.UnitsInStock，Validators.compose（[Validators.required，Validators.pattern（'^[0-9]{1,3}'）]），
“已中止”：数据项。已中止
});
}
}