如何在Angular中使用Pipe根据名称首字母动态设置背景颜色

步骤1：修正模板变量 #

你的原始模板里{{ Name }}需要改成{{ user.Name }}，因为*ngFor循环的变量是user：

<div *ngFor="let user of userList">
    <div>{{ user.Name }}</div>
</div>

步骤2：创建自定义颜色匹配Pipe #

先通过Angular CLI生成一个名为nameColor的Pipe：

ng generate pipe nameColor

在生成的name-color.pipe.ts文件中实现颜色匹配逻辑，注意先修正你的颜色配置数组里的键名错误（第二个和第三个对象的键是name，应该改成color）：

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

// 修正后的颜色配置（建议放到组件或独立服务中管理）
const colorConfigs = [
    {
        "code": "A",
        "color": "#0071e3"
    },
    {
        "code": "B",
        "color": "#ff0000"
    },
    {
        "code": "C",
        "color": "#249309"
    }
];

@Pipe({
  name: 'nameColor'
})
export class NameColorPipe implements PipeTransform {
  transform(name: string): string {
    if (!name) return '';
    // 提取名称首字符并转为大写，统一匹配规则
    const firstChar = name.charAt(0).toUpperCase();
    // 查找对应颜色配置
    const matchedConfig = colorConfigs.find(config => config.code === firstChar);
    // 返回匹配到的颜色，无匹配则返回空（或自定义默认色）
    return matchedConfig ? matchedConfig.color : '';
  }
}

步骤3：在模板中应用Pipe #

通过[style.backgroundColor]绑定Pipe的输出结果，实现动态设置背景色：

<div *ngFor="let user of userList">
    <div [style.backgroundColor]="user.Name | nameColor">{{ user.Name }}</div>
</div>

可选优化：支持传入外部颜色配置 #

如果颜色配置需要从组件动态传入，可修改Pipe的transform方法接收第二个参数：

transform(name: string, colorConfigs: any[]): string {
    if (!name || !colorConfigs) return '';
    const firstChar = name.charAt(0).toUpperCase();
    const matchedConfig = colorConfigs.find(config => config.code === firstChar);
    return matchedConfig ? matchedConfig.color : '';
}

模板中传入组件内的颜色配置数组：

<div [style.backgroundColor]="user.Name | nameColor:colorConfigs">{{ user.Name }}</div>

（colorConfigs为你组件中定义的颜色配置数组变量）

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