如何向Angular管道传递Record？解析错误问题排查

错误原因 #

Angular模板表达式解析器不支持直接使用数字作为对象字面量的未引号键，必须将数字键用引号包裹，或改用计算属性名等合法写法，否则会触发"意外标记0"的解析错误。

修正方案 #

方案1：给数字键添加引号（最直接）

修改HTML模板中的映射对象，将数字键用单/双引号包裹：

<div>
    {{ dto.status | mapEnumToText: { '0': 'Ok', '1': 'Error', '2': 'Review' } }}
</div>

Angular会自动将字符串键转换为数字类型匹配你的Record<number, string>类型定义，不影响管道内的取值逻辑。

方案2：结合枚举使用计算属性名（类型安全）

如果后续要替换为实际枚举，先在组件TS中将枚举暴露给模板：

import { Component } from '@angular/core';
import { MapEnumToTextPipe, enumToTextMapType } from './map-enum-to-text.pipe';

// 假设你的枚举定义
enum Status {
  Ok = 0,
  Error = 1,
  Review = 2
}

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  standalone: true,
  imports: [MapEnumToTextPipe]
})
export class ExampleComponent {
  dto = { status: Status.Ok };
  // 将枚举暴露给模板
  statusEnum = Status;
}

然后在模板中用计算属性名引用枚举值作为键：

<div>
    {{ dto.status | mapEnumToText: { [statusEnum.Ok]: 'Ok', [statusEnum.Error]: 'Error', [statusEnum.Review]: 'Review' } }}
</div>

这种写法避免硬编码数字，更符合类型安全要求。

方案3：用数组传递映射（可选）

如果不想修改对象键的写法，也可以用二维数组传递映射，再在管道内转换为对象：
修改模板：

<div>
    {{ dto.status | mapEnumToText: [[0, 'Ok'], [1, 'Error'], [2, 'Review']] }}
</div>

更新管道的transform方法：

transform(value: number, enumToTextEntries: [number, string][]): string {
  const enumToTextMap = Object.fromEntries(enumToTextEntries);
  return enumToTextMap[value];
}

原管道代码无需修改（针对方案1、2） #

你的管道定义完全兼容上述修正后的写法，无需调整：

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

export type enumToTextMapType = Record<number, string>;

@Pipe({
  name: 'mapEnumToText',
})
export class MapEnumToTextPipe implements PipeTransform {
  transform(value: number, enumToTextMap: enumToTextMapType): string {
    console.log(enumToTextMap);
    return enumToTextMap[value];
  }
}

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