Как замаскировать SSN, показывая xxxx-последние 4 цифры (9 цифр ssn) в значениях столбца AG-GRID

Question

Я работаю над проектом в Angular, где у нас есть объект метаданных где мы вставляем (выдвигая значения) и показывая эти метаданные значения в ag-grid. У нас есть свойство столбца (SSN) в этих метаданных Какой клиент хочет замаскировать, я должен показать только последние 4 цифры маска и другие поля как XXXXX-. Я не хочу менять значение SSN, так как есть кнопка редактирования, которая позволяет редактировать значения За исключением SSN, как я должен маскировать ssn в ag-grid, код будет как [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 недоступно для редактирования, вы можете использовать переменную с именем maskedSSN в вашем файле TS и затем связать его с вашим HTML для отображения.

для отображения, получите последние 4 цифры вашего SSN и используйте concat для формирования маскированного SSN с включенным XXXX.

При отправке его на сервер или для любых других операций, которые включают значение SSN, используйте исходное значение SSN.