Question

我正在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>

Answer 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)
  }
}

Answer 2

如果您的SSN字段不可编辑，则可以在TS文件中使用一个名为maskedSSN的变量，然后将其与HTML绑定以显示。

要显示，请获取SSN的最后4位数字，并使用concat组成包含XXXX的被屏蔽的SSN。

再次将其发送到后端或进行任何其他包含SSN值的操作时，请使用SSN的原始值。

如何屏蔽显示在AG-GRID列值上的xxxx后4位（9位ssn）的SSN

2 个答案: