Angular Material表格单元格JSON格式化显示问题求助

问题场景 #

在Angular项目的Mat-Table组件中，需要将mat-cell内的JSON数据格式化为每个键值对单独一行显示，尝试过\n换行、返回div标签（被当作字面量输出）、JSON.stringify(..., null, 2)等方法均未生效。

原始JSON：

{"MobilePhone":"3238759873","OtherPhone":"3238759871"}

期望显示效果：

MobilePhone : 3238759873
OtherPhone : 3238759871

解决方案 #

方案1：使用innerHTML解析HTML换行标签（简单直接）

修改字符串格式化方法，将换行替换为<br>标签，同时用[innerHTML]绑定数据（避免插值表达式转义HTML）：

TypeScript代码：

getValuesText(values: string): string {
  const jsonParsed = JSON.parse(values);
  // 将每个键值对转为字符串，再用<br>拼接
  return Object.entries(jsonParsed)
    .map(([key, value]) => `${key} : ${value}`)
    .join('<br>');
}

HTML模板修改：

<ng-container matColumnDef="previous">
  <mat-header-cell *matHeaderCellDef mat-sort-header><b>Previous</b></mat-header-cell>
  <mat-cell *matCellDef="let record" [innerHTML]="getValuesText(record.oldValues)"></mat-cell>
</ng-container>

方案2：模板内直接遍历JSON（更安全，无XSS风险）

如果JSON数据来源不可信，innerHTML存在XSS风险，推荐直接在模板中解析并遍历键值对：

TypeScript代码：

// 解析JSON并转为键值对数组
parseJsonValues(values: string): {key: string, value: any}[] {
  const jsonData = JSON.parse(values);
  return Object.entries(jsonData).map(([key, value]) => ({ key, value }));
}

HTML模板修改：

<ng-container matColumnDef="previous">
  <mat-header-cell *matHeaderCellDef mat-sort-header><b>Previous</b></mat-header-cell>
  <mat-cell *matCellDef="let record">
    <!-- 遍历解析后的键值对，每个放在单独div实现换行 -->
    <div *ngFor="let item of parseJsonValues(record.oldValues)">
      {{ item.key }} : {{ item.value }}
    </div>
  </mat-cell>
</ng-container>

原方法失效原因说明 #

1. \n换行无效：HTML默认会忽略普通文本中的换行符，需要用<br>标签或块级元素触发换行。
2. 返回HTML标签被当作字面量：插值表达式{{}}会自动转义HTML标签，将其作为字符串输出而非解析为DOM元素。
3. JSON.stringify带缩进无效：该方法生成的缩进和换行在HTML中会被合并为单个空格，无法渲染出换行效果。

内容的提问来源于stack exchange，提问作者Pavel