如何屏蔽在 AG-GRID 列值上显示 xxxx-last 4 digit（9 digit ssn）的 SSN答案

【问题标题】：How to mask SSN showing xxxx-last 4 digit (9 digit ssn) on AG-GRID Column values如何屏蔽在 AG-GRID 列值上显示 xxxx-last 4 digit（9 digit ssn）的 SSN
【发布时间】：2019-06-02 08:33:26
【问题描述】：

我正在使用 Angular 开发一个项目，其中我们有元数据对象我们在哪里插入（推送值）并显示元数据 ag-grid 的值。我们在该元数据中有一个列属性 (SSN) 哪个客户要屏蔽，我只需要显示最后 4 位数字掩码和其他字段为 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>

【问题讨论】：

@HDJEMAI 你能帮帮我吗
你可以发布你已经尝试过的代码吗？
@GregBurghardt 我没有确切的代码，但在我的 rowData 中我有 ssn 、firstname、lastname 和其他值之类的值，例如 {0: {ssn: "123456789",firstname:"sarvesh "}, 1: {"ssn":"987654321",firstname:"rahul"}} 其中 0 ,1 是索引，我想将这些 SSN 屏蔽为 XXXXX-LAST 4DIGIT VISIBLE 但我不想更改对象值。如何实现这一目标
通过有角的管道，我们可以为个别属性做这样的事情 {{ssn | pipe}} 可以转换数据，但问题是在这里我传递整个 rowData 值的 ag-grid，是否有任何 columapi 属性 ag-grid 提供只能在网页上转换数据而不改变值。
我认为更好的方法是屏蔽 SSN 服务器端。即使屏蔽了，在浏览器中获取真正的 SSN 也不是太难。

标签： angular2-services ag-grid angular-pipe

【解决方案1】：

您可以为此使用Cell Renderer。

如示例中所示，您必须为SSN 的列提供cellRenderer 和ColDef。

{field: 'gold', width: 100, cellRenderer: 'myCellRenderer'}

您甚至可以在定义ColDef 时为cellRenderer 参数提供一个回调函数——它应该返回一个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)
  }
}

【讨论】：

paritosh，你能详细说明一下吗，我已经浏览了文档，我需要为此创建一个单元格渲染器组件吗？假设现在在我的columdef中我已经添加了像这样的cellrenderer columdef= {field :SSN ,width:100 ,cellRenderer: 'maskcellrenderer'} ，我应该在哪里提供这个回调函数。在 maskcellrendere 组件中会有 aginit() 它将初始化参数。

【解决方案2】：

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

为了显示，获取您的 SSN 的最后 4 位数字并使用 concat 形成一个包含 XXXX 的屏蔽 SSN。

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

【讨论】：

Thnks @praveen rana 对于不同的方法，但我想上述方法更适合使用 cellrenderer 的回调函数