Angular/Typescript：在下拉菜单中重命名单个枚举值答案

【问题标题】：Angular/Typescript: Rename individual enum values in a dropdown menuAngular/Typescript：在下拉菜单中重命名单个枚举值
【发布时间】：2021-01-20 12:20:05
【问题描述】：

假设我有一个枚举，它只是

export enum TestEnum {
  A = 'A',
  B = 'B',
  C = 'C',
}

在我的 components.ts 方法中你可以找到这个：


optionsTestEnum: SelectItem[];

  initDropdownOptionsEnum() {

    this.optionsTestEnum = Object.keys(TestEnum).map(v => {
      return { label: v, value: v };
    });
  }

SelectedItem 从 Java 后端获取枚举值。

TestEnum.java：

public enum TestEnum {
  A, B, C
}

而我的 component.html 是这样的：

        <div class="col-6 col-sm-6">
          <si-newton-form-group [label]="'testFlag' | translate" ccFormGroup>
            <p-dropdown [options]="optionsTestEnum" formControlName="testFlag" 
                        [ccDisabled]="readOnly" ccNewton>
            </p-dropdown>
            <cc-input-validationmessage [form]="testForm" controlName="testFlag">
            </cc-input-validationmessage>
          </si-newton-form-group>
        </div>

我想做一个 if, else 语句，我可以从 testenum (A,B,C) 中选择值并使用单独重命名这些变量

this.translate.instant(''),

如果我这样写：

    this.optionsTestEnum = Object.keys(TestEnum).map(v => {
      return { label: this.translate.instant('testEnum.test1'),, value: v };
    });
  }

我前端的下拉菜单只显示枚举 (A,B,C) 中的所有三个值现在都具有相同的名称。

翻译：

this.translate.instant(''),

在我的例子中使用一个 json 文件 en.json。

    "testEnum": {
        "test1": "Test 1",
        "test2": "Test 2",
        "test3": "Test 3",

我的枚举中的值应该具有 json 文件中的名称。 A 应该重命名为 Test 1，B 应该重命名为 Test 2，C 应该重命名为 Test 3。那么如何在 component.ts 中编写一个 if 条件来正确重命名我的变量？

有人可以帮帮我吗？

【问题讨论】：

我真的不明白问题出在哪里
我的枚举 (A,B,C) 中的值应该通过在 component.ts 中使用 if 条件单独重命名

标签： angular typescript enums

【解决方案1】：

这里

this.optionsTestEnum = Object.keys(TestEnum).map(v => {
      return { label: this.translate.instant('testEnum.test1'), value: v };
    });

您将每个vs 转换为字符串“testEnum.test1”，因此您总是得到“Test 1”。

你想做的是这样的：

    this.optionsTestEnum = Object.keys(TestEnum).map(v => {
      return { label: this.translate.instant('testEnum.' + v), value: v };
    });

这样您将翻译字符串“testEnum.A”、“testEnum.B”和“testEnum.C”。现在您只需将 A、B、C 的翻译放入您的翻译文件中，例如：

 "testEnum": {
    "A": "Test 1",
    "B": "Test 2",
    "C": "Test 3"
 }

【讨论】：

【解决方案2】：

一种解决方案是重命名您的翻译键以反映枚举键：

"testEnum": {
    "testA": "Test 1",
    "testB": "Test 2",
    "testC": "Test 3",

然后

this.optionsTestEnum = Object.keys(TestEnum).map(k => {
      return { label: this.translate.instant(`testEnum.test${k}`),, value: k };
    });
  }

【讨论】：