我正在Angular中的一个项目中,我们有元数据对象 我们在其中插入(推入值)并显示该元数据的位置 农业网格的价值。该元数据中有一个列属性(SSN) 哪个客户要掩盖,我只需要显示最后4位数字 mask和其他字段,例如XXXXX-。我不想更改 SSN,因为还有一个编辑按钮,它允许编辑值 除了SSN,我应该如何在ag-grid中屏蔽ssn,代码将是 像[rowData] =“ rowData”。 rowData具有类似于ssn的数组中的值 作为财产之一。
<ag-grid-angular
style="width: 500px; height: 500px;"
class="ag-theme-balham"
[rowData]="rowData"
[columnDefs]="columnDefs"
>
</ag-grid-angular>
答案 0 :(得分:1)
您可以为此使用Cell Renderer
。
如示例中所示,您必须为cellRenderer
的列提供ColDef
和SSN
。
{field: 'gold', width: 100, cellRenderer: 'myCellRenderer'}
您甚至可以在定义cellRenderer
时为ColDef
参数提供回调函数-应该返回一个string
。
ssnColDef = {
field: 'SSN',
width: 100,
cellRenderer = (param) => {
// param.value will be the cell value
// do string operations to mask the SSN value with XXX
return 'XXXX' + param.value.substring(4, param.value.substring.length)
}
}
答案 1 :(得分:0)
如果您的SSN字段不可编辑,则可以在TS文件中使用一个名为maskedSSN的变量,然后将其与HTML绑定以显示。
要显示,请获取SSN的最后4位数字,并使用concat组成包含XXXX的被屏蔽的SSN。
再次将其发送到后端或进行任何其他包含SSN值的操作时,请使用SSN的原始值。