Question

我在Angular 5中使用JqxGrid，我在网格中有一些数字字段，我想用angular的数字管道格式化它们。但问题是jqxGrid并未将管道视为角度特征并按原样打印。这是我尝试使用单元格渲染器实现的方法

    formatNumber = (row, columnfield, value, defaulthtml, columnproperties,rowdata) =>
  { 
      return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + ';">${{' + value + ' | number }}</span>'; 
  };

例如，如果值是123456，我将获得$ {{123456 | number}}，我想获得的是$ 123,456。我已经在component.ts文件中定义了列和源。

Answer 1

CodingFreak的解决方案可能可行，我建议使用它，但是如果您坚持使用Angular Pipe指令，则这里是另一种解决方案。

在您的component.ts文件中，注入CurrencyPipe服务：

constructor(public cp: CurrencyPipe) { }

然后，在您的app.module.ts或component.ts文件中，确保在您的提供商中包括CurrencyPipe服务：

providers: [ CurrencyPipe ]

最后，您可以按以下方式使用管道：

formatNumber = (row, columnfield, value, defaulthtml, columnproperties,rowdata) =>
{ 
    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + ';">$' + this.cp.transform(value, "USD") + '</span>'; 
};

转到Angular Documentation获取更多选项。

Answer 2

cellsrenderer函数只能返回HTML代码，因此当您通过此函数返回该代码时，任何角度代码均无效。

相反，您可以使用cellsformat属性，并将其分配给您拥有该数字数据的列。

请参阅此处的官方文档：jqxGrid Cells Formatting

按如下所示定义您的列，以得到预期的输出为“ $ 123,456” ：

let columns: any[] = [];
columns = $.merge(columns,[
     // datafield is the name of the property from which you are assigning value from your data.  
     // text is the name of the column in the grid.
     // cellsformat:"c" indicates currency numbers. 
     {text:"Number Column", datafield:"price", cellsrenderer: this.formatnumber, cellsformat:"c"} 
]);

JSFiddle：Click Here

如何在JqxGrid的单元格渲染器中使用Angular管道

2 个答案: