从枚举Angular中选择选项[重复]答案

【问题标题】：Select options from enum Angular [duplicate]从枚举Angular中选择选项[重复]
【发布时间】：2021-12-30 09:38:20
【问题描述】：

我有这个枚举：

export enum LogLevel {
    DEBUG = 'DEBUG',
    INFO = 'INFO',
    WARNING = 'WARNING',
    ERROR = 'ERROR'
}

我想在我的表单中构建一个选择，每个选项的枚举文本作为标签：

<select>
     <option value="DEBUG">DEBUG</option>
     <option value="INFO">INFO</option>
     <option value="INFO">INFO</option>
     <option value="INFO">INFO</option>
</select>

这样做的正确方法是什么？

【问题讨论】：

标签： javascript angular typescript

【解决方案1】：

尝试使用 Object.values 将枚举转换为数组：

    <select>
      <option *ngFor="let logValue of Object.values(LogLevel)" [ngValue]="logValue">{{}logValue}</option>
   </select>

【讨论】：

【解决方案2】：

这是一个简单的解决方案


 1. content of app.component.ts:

export class AppComponent {
  keys = Object.keys;
  logLevel = LogLevel;

  selected = LogLevel.DEBUG;

  select(event: any) {
    const value = event.target.value;
    this.selected = value;
    console.log(this.selected);
  }
}

export enum LogLevel {
  DEBUG = 'DEBUG',
  INFO = 'INFO',
  WARNING = 'WARNING',
  ERROR = 'ERROR',
}

 2. content of app.component.html

<select [(ngModel)]="selected" (change)="select($event)">
  <option *ngFor="let log of keys(logLevel)" [value]="logLevel[log]">
    {{ log }}
  </option>
</select>

更多信息请查看此链接https://stackblitz.com/edit/angular-ivy-cuhnbw

【讨论】：