Angular Material Select 在选项字段中显示函数名称

Question

我正在表单中创建一个下拉列表，该下拉列表从我创建的枚举中获取数据。 所以发生的事情是，当我在 mat-option 中迭代元素时，它会列出枚举的所有字段以及我用来调用枚举值的函数。这是我的语言枚举

export enum LanguageEnum{
da = "da-DA",
de = "de-DA",
en= "en-EN",
es= "es-ES",
fi= "fi-FI",
fr = "fr-FR",
it= "it-IT",
ko= "ko-KO",
ms= "ms-MS",
nl= "nl-NL",
no= "no-NO",
pl= "pl-PL",
pt= "pt-PT",
sv= "sv-SE"
}

以下是我用来仅从枚举中获取值的方法

export namespace LanguageEnum {

        export function getLangCodes() {
          return Object.values(LanguageEnum).filter(
            (langCode) => isNaN(<any>langCode) && langCode !== 'values'
          );
        }
      }

这就是我为 mat-select 中的每个枚举迭代的方式

<mat-form-field appearance="outline">
          <mat-label>Chosen Language</mat-label>
          <mat-select placeholder="Chosen Language" formControlName="ChosenLanguage">
            <mat-option *ngFor="let chosenlang of langCodes.getLangCodes();" [value]="chosenlang">
              {{ chosenlang }}</mat-option>
          </mat-select>
        </mat-form-field>

我还在 ts 文件中导入了 LanguageEnum 并初始化

this.langCodes = LanguageEnum; 

见上面的输出图像，它显示了函数名称以及枚举条目。 如何解决？

Answer 1

试试这个：

export namespace LanguageEnum {

        function getLangCodes() {
          return Object.values(LanguageEnum).filter(
            (langCode) => isNaN(<any>langCode) && langCode !== 'values'
          );
        }
      }