Angular 如何在JqxGrid'；s单元渲染器

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

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

formatNumber=（行、列字段、值、默认HTML、列属性、行数据）=>
{ 
返回'${'+value+'| number}}'；
};

---

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

cellsrenderer

函数只能返回HTML代码，因此通过此函数返回时，任何角度代码都不起作用

相反，您可以使用

cellsformat

属性，并将其分配给具有该数值数据的列

请参阅此处的官方文件：

按如下所示定义列，以获得预期输出：“$123456”：

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"} 
]);

---

jsIDLE:

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>'; 
};

formatNumber=（行、列字段、值、默认HTML、列属性、行数据）=>
{ 
返回“$”+this.cp.transform（值，“USD”）+”；
};

转到获取更多选项。

当不在Angular的范围内时，无法使用“|”访问管道。您必须直接在组件中导入并调用管道的转换方法。检查以下答案：