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

Question

我在 Angular 5 中使用 JqxGrid，我在网格中有一些字段是数字，我想用 angular 的数字管道来格式化它们。但问题是 jqxGrid 没有将管道视为 angular 功能并按原样打印。这是我如何尝试使用单元格渲染器

来实现这一点

    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

cellsrenderer 函数只能 return HTML 代码，因此当您通过此函数 return 时，任何 angular 代码都不起作用。

相反，您可以使用 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

Answer 2

CodingFreak 的解决方案可能有效，我推荐使用它，但如果您坚持使用 Angular 管道指令，这里还有另一个解决方案。

在您的 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 以获得更多选项。

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

How to use Angular pipes in JqxGrid's cell renderer

angular

typescript

jqxgrid