Angular中DevExtreme DataGrid列特定值的显示名称修改方法

方法一：修复Lookup绑定（推荐） #

你之前的Lookup思路可行，但绑定数据源时存在语法错误——直接写字符串dataSource="typeLookupDataSource"无法关联到组件内的变量，必须使用属性绑定语法[dataSource]。修正后，匹配的代码会自动显示友好名称，未匹配的代码将保留原值，刚好符合需求。

修改后的代码： #

TypeScript（无需改动，可简化映射数组）

constructor(
  private dataService: AdministrationService,
  private exportService: ExportService,
  private router: Router,
  private fileUploadService: FileUploadService) {
}

typeLookupDataSource = [
  { code: 'QRT', name: 'tests' },
  { code: 'QRI', name: 'reports' }
  // YPT无需手动配置，未匹配的代码会自动显示原值
];

HTML（修正数据源绑定）

<dxi-column dataField="Type"
            caption="Type"
            [allowEditing]="true">
  <dxi-lookup [dataSource]="typeLookupDataSource"
              valueExpr="code"
              displayExpr="name">
  </dxi-lookup>
</dxi-column>

方法二：使用CellTemplate自定义渲染 #

如果需要更灵活的逻辑（比如后续扩展更多映射规则），可以通过cellTemplate实现条件判断：

代码示例： #

HTML

<dxi-column dataField="Type"
            caption="Type"
            [allowEditing]="true"
            cellTemplate="typeCellTemplate">
</dxi-column>

<!-- 定义单元格模板 -->
<div *dxTemplate="let cell of 'typeCellTemplate'">
  {{ getTypeDisplayName(cell.data.Type) }}
</div>

TypeScript（添加转换函数）

constructor(
  private dataService: AdministrationService,
  private exportService: ExportService,
  private router: Router,
  private fileUploadService: FileUploadService) {
}

getTypeDisplayName(typeCode: string): string {
  switch(typeCode) {
    case 'QRT':
      return 'tests';
    case 'QRI':
      return 'reports';
    default:
      return typeCode; // 其他代码保持原样
  }
}

说明： #

• 方法一利用DevExtreme Lookup的内置特性，代码简洁，适合固定映射场景；
• 方法二更灵活，适合需要复杂逻辑判断或动态更新映射规则的场景。

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