Angular5：使用*ngFor遍历枚举实现Unicode字符下拉框

嘿，我来帮你搞定这个Angular下拉框的需求～

首先说下枚举的问题：TypeScript枚举虽然能定义键值映射，但用来做遍历渲染的话其实不太顺手——尤其是字符串枚举，你得额外处理才能拿到键值对的集合，反而不如直接用数组或对象来得灵活。下面给你两种最优实现方案，直接能用：

方案1：用数组结构（最适合*ngFor遍历） #

这种方式最直观，模板里直接就能用，不用额外转换。

首先定义一个接口和数组（可以单独放一个常量文件，比如operators.ts）：

// operators.ts
export interface Operator {
  // 你的标识符，比如'equals'
  key: string;
  // HTML转义字符，比如'='
  htmlEntity: string;
}

// 静态数据集合
export const OPERATORS: Operator[] = [
  { key: 'equals', htmlEntity: '=' },
  { key: 'notEquals', htmlEntity: '≠' },
  { key: 'greaterThan', htmlEntity: '>' },
  { key: 'lessThan', htmlEntity: '<' },
  { key: 'plus', htmlEntity: '+' }
];

然后在组件里引入这个数组：

// your-component.component.ts
import { Component } from '@angular/core';
import { OPERATORS, Operator } from './operators';

@Component({
  selector: 'app-operator-select',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  operators = OPERATORS;
  // 用来存选中的选项，绑定ngModel用
  selectedOperatorKey?: string;
}

最后在模板里写下拉框，必须用[innerHTML]才能让HTML实体被解析成字符（直接插值{{op.htmlEntity}}会显示原始字符串）：

<!-- your-component.component.html -->
<select [(ngModel)]="selectedOperatorKey">
  <option 
    *ngFor="let op of operators" 
    [value]="op.key" 
    [innerHTML]="op.htmlEntity"
  ></option>
</select>

方案2：用对象结构（适合需要按key快速查找的场景） #

如果你的业务里除了遍历，还需要通过标识符快速获取对应的HTML实体，可以用对象，然后在组件里转换成数组供*ngFor使用：

// operators.ts
export const OPERATOR_MAP = {
  equals: '=',
  notEquals: '≠',
  greaterThan: '>',
  lessThan: '<'
} as const;

// 转换成数组供遍历用
export const OPERATORS = Object.entries(OPERATOR_MAP).map(([key, htmlEntity]) => ({
  key,
  htmlEntity
}));

组件和模板的用法和方案1完全一致，这样既保留了对象的快速查找能力，又能方便遍历渲染。

为什么不推荐用枚举？ #

举个例子，如果你定义字符串枚举：

enum OperatorEnum {
  equals = '=',
  notEquals = '≠'
}

要遍历它的话，你得写Object.keys(OperatorEnum)，但拿到的只是键的数组，还要手动去枚举里取值，模板里还要多一层处理，远不如数组直接遍历省心。而且枚举更多是用来定义固定的常量集合，不是用来做键值对遍历渲染的。

另外要注意：如果你的HTML实体是静态定义的（像你现在的需求），完全不用担心XSS风险——Angular的[innerHTML]会自动做安全校验，只有可信的内容才会被渲染。

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