如何将数据库存储的大写格式项目转换为友好显示格式？

针对数据库存储的下拉选项大写值，我们可以通过映射字典+转换方法/管道的方式，优雅地将其转为友好格式显示在Angular表格中。

问题分析 #

你当前的enumMap()方法是遍历所有行查找是否存在SAVEDITEM，找到后返回固定字符串，这并非针对每行数据的转换逻辑，无法实现表格每行对应值的个性化显示。

实现步骤 #

1. 定义映射字典（TS代码）

先创建一个键值对字典，把数据库中的大写值和对应的友好名称一一对应，方便后续扩展：

// 组件类内定义映射关系
private valueMapping: Record<string, string> = {
  'SAVEDITEM': '已保存项',
  // 可按需添加更多映射，例如 'DRAFTITEM': '草稿项'
};

// 单个值转换方法
getFriendlyDisplay(rawValue: string): string {
  // 存在映射则返回友好名称，否则返回原始值（或自定义默认文本）
  return this.valueMapping[rawValue] || rawValue;
}

2. 修改表格模板（HTML代码）

在表格单元格模板中调用转换方法，替换直接显示原始值的逻辑：

<ngx-datatable-column name="先前值" prop="changedFrom" [minWidth]="50" [maxWidth]="150">
  <ng-template ngx-datatable-cell-template let-row="row">
    <span>{{ getFriendlyDisplay(row.oldValue) }}</span>
  </ng-template>
</ngx-datatable-column>

进阶方案：使用Angular管道（推荐）

如果多个组件都需要这种转换逻辑，建议封装成Angular管道，提升复用性：

// 创建 value-translate.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'valueTranslate' })
export class ValueTranslatePipe implements PipeTransform {
  private valueMap: Record<string, string> = {
    'SAVEDITEM': '已保存项',
    // 更多映射
  };

  transform(rawValue: string): string {
    return this.valueMap[rawValue] || rawValue;
  }
}

在模块中声明管道后，直接在模板中使用：

<span>{{ row.oldValue | valueTranslate }}</span>

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