Angular 12 实现JSON驼峰键名转首字母大写空格分隔格式方法咨询

实现思路 #

Angular 中对值做格式转换最优方案是使用纯管道，无副作用、性能优异，无需引入任何第三方依赖。

步骤1：创建自定义管道 #

可以手动创建或者通过Angular CLI生成管道文件：

# 可选CLI生成命令，会自动创建文件并做基础声明
ng generate pipe pipes/camelCaseToTitle

管道核心代码：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'camelCaseToTitle',
  pure: true
})
export class CamelCaseToTitlePipe implements PipeTransform {
  transform(value: string): string {
    if (!value) return '';
    // 匹配驼峰大写位置插入空格，再处理首字母大写
    return value
      .replace(/([A-Z])/g, ' $1')
      .replace(/^./, firstChar => firstChar.toUpperCase());
  }
}

步骤2：模块中声明管道 #

将管道添加到使用场景对应模块的declarations数组中：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CamelCaseToTitlePipe } from './pipes/camel-case-to-title.pipe';
// 导入你的表格组件
import { TableComponent } from './table.component';

@NgModule({
  declarations: [
    TableComponent,
    CamelCaseToTitlePipe
  ],
  imports: [CommonModule]
})
export class YourBusinessModule { }

步骤3：模板中直接调用 #

在表格头部的渲染逻辑中直接使用管道转换即可：

<thead>
  <tr>
    <th *ngFor="let header of headers">
      {{ header | camelCaseToTitle }}
    </th>
  </tr>
</thead>

可选适配优化 #

如果你的表头存在连续大写的场景（比如userID），可以调整管道内的正则规则，避免拆分连续大写：

// 调整后的转换逻辑，适配连续大写场景
transform(value: string): string {
  if (!value) return '';
  return value
    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
    .replace(/^./, firstChar => firstChar.toUpperCase());
}

该实现完全基于原生JS和Angular原生能力，无任何第三方依赖，Angular 12版本全兼容，运行无报错。

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