Angular：使用TitleCasePipe时如何保留QA等特定大写术语？

现有如下对象：

{
    "Draft": 19,
    "Process Model QA review in progress": 22,
    "Process Model QA Rejected": 17,
    "Process Model QA Approved": 13,
    "Process Owner review in progress": 28,
    "Approved": 22,
    "Opt-out": 3,
    "Process Owner Rejected": 4,
    "Process Owner Approved": 10,
    "Soln. Architect review in progress": 4,
    "Soln. Architect Rejected": 4,
    "Cancelled": 10
}

在Angular里，我通过构造函数注入了TitleCasePipe：

constructor(@Self() private titleCasePipe: TitleCasePipe)

然后用这段代码遍历对象转换键的格式：

Object.entries(obj).map(elem => {
    arr.push({'id': elem[0], 'name': this.titleCasePipe.transform(elem[0]) + " (" + elem[1] + ")"})
 })
 
 console.log(arr)

现在的问题是，TitleCasePipe会把键里的QA转成Qa（比如变成“Process Model Qa Review In Progress”），但我需要保留QA的大写形式，同时想知道能不能在HTTP请求的map运算符里直接处理这个需求。

方法一：给TitleCasePipe加个“补丁” #

先拿TitleCasePipe做常规的首字母大写转换，之后把需要保留大写的词汇（比如QA、Soln.）替换回去就行，代码这样写：

// 把需要保留大写的词汇都放这里
const keepUppercase = ['QA', 'Soln.'];

Object.entries(obj).map(elem => {
  let transformedKey = this.titleCasePipe.transform(elem[0]);
  // 遍历替换每个需要保留大写的词
  keepUppercase.forEach(word => {
    // 先拿到这个词被TitleCasePipe转成的样子，比如QA会变成Qa
    const titleCaseVersion = this.titleCasePipe.transform(word.toLowerCase());
    // 把转换后的结果里的Qa替换回QA
    transformedKey = transformedKey.replace(titleCaseVersion, word);
  });
  arr.push({
    'id': elem[0],
    'name': `${transformedKey} (${elem[1]})`
  });
});

以后要加新的保留大写词汇，直接往keepUppercase数组里加就行，很灵活。

方法二：在HTTP请求里直接处理 #

既然数据是从API拿的，完全可以在请求响应的map操作里处理好，这样组件拿到手的就是已经处理完的数组，不用再在组件里折腾：

import { HttpClient } from '@angular/common/http';
import { TitleCasePipe } from '@angular/common';
import { map } from 'rxjs/operators';

// 在服务里写请求逻辑
constructor(private http: HttpClient, private titleCasePipe: TitleCasePipe) {}

fetchData() {
  const keepUppercase = ['QA', 'Soln.'];
  return this.http.get<Record<string, number>>('你的API地址').pipe(
    map(rawObj => {
      return Object.entries(rawObj).map(([key, count]) => {
        let transformedKey = this.titleCasePipe.transform(key);
        keepUppercase.forEach(word => {
          const titleCaseVersion = this.titleCasePipe.transform(word.toLowerCase());
          transformedKey = transformedKey.replace(titleCaseVersion, word);
        });
        return {
          id: key,
          name: `${transformedKey} (${count})`
        };
      });
    })
  );
}

之后在组件里调用这个服务方法，订阅就能拿到处理好的数据了。

方法三：自定义管道（长期复用更方便） #

如果很多地方都需要这种“保留特定大写词汇”的首字母转换，不如直接写个自定义管道，继承原有的TitleCasePipe，把逻辑封装进去：

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

@Pipe({
  name: 'customTitleCase'
})
export class CustomTitleCasePipe extends TitleCasePipe implements PipeTransform {
  // 这里定义要保留大写的词汇
  private keepUppercase = ['QA', 'Soln.'];

  transform(value: string): string {
    // 先调用父类的转换方法
    let result = super.transform(value);
    // 替换回需要大写的词汇
    this.keepUppercase.forEach(word => {
      const titleCaseVersion = super.transform(word.toLowerCase());
      result = result.replace(titleCaseVersion, word);
    });
    return result;
  }
}

用的时候直接换这个自定义管道就行：

Object.entries(obj).map(elem => {
  arr.push({
    'id': elem[0],
    'name': `${this.customTitleCasePipe.transform(elem[0])} (${elem[1]})`
  });
});

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