Aurelia绑定中如何显示TypeScript枚举名称？

假设咱们已经完成了所有必要的引入和配置：ViewModel（file.ts）里有个可绑定的Color类型变量，Color是在Color.ts里定义的枚举，直接在视图（file.html）绑定的话，文本框只会显示枚举对应的数值（比如0、1这类），但咱们想要显示枚举的名称（比如Red、Blue），这几个方案可以帮到你：

方案1：使用值转换器（Value Converter） #

这是比较通用且优雅的方式，适合多个地方复用的场景：

首先创建一个值转换器文件EnumNameValueConverter.ts：

export class EnumNameValueConverter {
  // 把枚举数值转换成对应的名称
  toView(value: any, enumType: object): string {
    // 利用枚举的反向映射特性获取名称
    return enumType[value];
  }
}

然后在你的视图中引入并使用这个值转换器：

<!-- 先引入值转换器 -->
<require from="./EnumNameValueConverter"></require>

<!-- 在绑定中使用转换器，传入枚举类型作为参数 -->
<TextBox text.bind="myColor | enumName:Color"></TextBox>

别忘了在应用的资源配置里注册这个值转换器（如果框架要求的话），比如在app.html里：

<resources>
  <value-converter key="enumName" value="EnumNameValueConverter"></value-converter>
</resources>

方案2：在ViewModel中派生显示属性 #

如果只是单个地方需要显示枚举名称，直接在ViewModel里加个只读属性更简单：

// file.ts
import { Color } from './Color';

export class MyViewModel {
  // 原始的枚举变量
  myColor: Color = Color.Red;

  // 派生的名称属性，供视图绑定
  get myColorName(): string {
    return Color[this.myColor];
  }
}

然后视图里直接绑定这个派生属性就行：

<!-- file.html -->
<TextBox text.bind="myColorName"></TextBox>

补充小提示 #

如果你的枚举有特殊命名（比如带下划线、全大写），还可以在值转换器或者派生属性里加个额外的格式化逻辑，比如把DARK_BLUE转换成Dark Blue，让显示更友好~

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