我想获得与枚举结合的选定值的下拉列表

Question

我正在尝试在选择第一个值的情况下实现下拉菜单，并禁用仅向用户显示。 它应该识别枚举而不是常规字符串

HTML

            <select name="level" [(ngModel)]="level">
                <option disabled [selected]="disabledValue" [value]="disabledValue">{{disabledValue}}</option>
                <option *ngFor="let level of levelKeys" [value]="level">{{level}}</option>
            </select>

ts

  public disabledValue: string = 'level';
  public level: Level = Level.EMPTY; // Level is enum

枚举

export enum Level {
    EMPTY, EASY, NORMAL, HARD
}

关卡类包含简单普通和困难。

在我的用户界面中，他应该会看到级别，点击下拉菜单后会向他显示具有 3 个选项的级别类

下拉菜单看起来像这样 ->

[level] selected + disabled 
[easy] option 1
[normal] option 2
[hard] option 3

感谢你们的帮助:-)

Answer 1

好吧，在这方面，使用枚举与使用数组并没有什么不同。 我不会问为什么必须是枚举，但是要从枚举中获取值，您可以执行以下操作：

enum Level {
  EMPTY = 'level',
  EASY= 'EASY',
  NORMAL = 'NORMAL',
  HARD = 'HARD'
}

然后在您的component.ts 文件中：

levelKeys = Object.values(Level);

我在这里有一个工作示例：
https://stackblitz.com/edit/angular-ivy-dcqawz?file=src/app/app.component.ts

它看起来像这样：

模板.html：

<select name="level" [(ngModel)]="level" >
    <option *ngFor="let level of levelKeys" [disabled]="level === 'level'" [value]="level">{{level}}</option>
</select>

组件.ts

import { Component, VERSION } from '@angular/core';

enum Level {
  EMPTY = 'level',
  EASY= 'EASY',
  NORMAL = 'NORMAL',
  HARD = 'HARD'
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  public level: Level = Level.EMPTY; 
  levelKeys = Object.values(Level);
}

这将显示如下下拉列表：

请看 :-)