如何在TypeScript中保持Enum顺序并在Angular下拉框中展示

问题原因 #

keyvalue管道默认会对枚举的键进行排序（数字键优先，字符串键按字母顺序），因此会打乱你定义枚举时的原始顺序。

解决方案一：给keyvalue管道传入自定义比较器 #

1. 在组件类中添加排序逻辑 #

// 定义枚举的原始顺序（和你定义Cars枚举的顺序一致）
private readonly carEnumOrder = [Cars.VOLVO, Cars.AUDI, Cars.VOLKSWAGEN, Cars.NISSAN];

// 自定义比较函数，根据原始顺序排序
compareCarOptions(a: { key: string, value: string }, b: { key: string, value: string }) {
  return this.carEnumOrder.indexOf(a.value) - this.carEnumOrder.indexOf(b.value);
}

2. 修改HTML模板 #

把自定义比较器传给keyvalue管道：

<p-dropdown [options]="carsList | keyvalue:compareCarOptions"
        [(ngModel)]="car.name" optionLabel="value" optionValue="key"
        placeholder="Choose"></p-dropdown>

解决方案二：提前构造有序选项数组（更直观） #

直接在组件中生成符合顺序的选项数组，避开keyvalue管道的默认排序：

1. 在组件类中初始化有序数组 #

carsOptions: { key: string, value: string }[];

ngOnInit(): void {
  // 严格按照枚举定义顺序生成选项
  this.carsOptions = [
    { key: 'VOLVO', value: Cars.VOLVO },
    { key: 'AUDI', value: Cars.AUDI },
    { key: 'VOLKSWAGEN', value: Cars.VOLKSWAGEN },
    { key: 'NISSAN', value: Cars.NISSAN }
  ];
}

2. 修改HTML模板 #

直接使用提前构造好的有序数组：

<p-dropdown [options]="carsOptions"
        [(ngModel)]="car.name" optionLabel="value" optionValue="key"
        placeholder="Choose"></p-dropdown>

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