如何在Angular视图中将表格表头数组键的下划线替换为空格？

嘿，刚好有个超适合你的方案——自定义Angular管道！这玩意儿专门用来在模板里做数据转换，完全不用改动组件里的逻辑，完美匹配你不想在Component处理的要求。

步骤1：生成自定义管道 #

先通过Angular CLI快速创建一个管道：

ng generate pipe underscore-to-space

步骤2：实现管道转换逻辑 #

打开自动生成的underscore-to-space.pipe.ts文件，修改transform方法，把下划线替换成空格。如果想让每个单词首字母大写（比如Bill_Number变成Bill Number），可以加个额外处理：

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

@Pipe({
  name: 'underscoreToSpace'
})
export class UnderscoreToSpacePipe implements PipeTransform {

  transform(value: string): string {
    if (!value) return value;
    // 基础版：仅替换下划线为空格
    // return value.replace(/_/g, ' ');
    
    // 进阶版：替换下划线+每个单词首字母大写
    return value.split('_')
      .map(word => word.charAt(0).toUpperCase() + word.slice(1))
      .join(' ');
  }

}

步骤3：在模板里使用管道 #

直接在你的表头th标签里用上这个管道就行，不用改任何组件代码：

<table>
  <thead>
    <tr>
      <th *ngFor="let header of printFields">{{header | underscoreToSpace}}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let ab of printData">
      <td *ngIf="ab.Bill_Number">{{ab.Bill_Number}}</td>
      <td>.....</td>
      <td>.....</td>
    </tr>
  </tbody>
</table>

额外提醒 #

确保你的管道已经在对应的Angular模块的declarations数组里（用CLI生成的话会自动添加，手动创建的话得自己加进去）。

这个方法的好处就是完全遵循Angular的设计模式，把数据转换逻辑和组件/模板解耦，而且完全满足你不想在Component里处理的要求～

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