如何将枚举作为 devextreme 选择框的数据源

【问题标题】：How to put an enum as dataSource for devextreme select box如何将枚举作为 devextreme 选择框的数据源
【发布时间】：2021-10-14 05:01:18
【问题描述】：

我想用作为类属性的枚举值填充选择框我的 HTML：

<div class="channel-visible">
        <div class="title">Sichtberagt</div>
        <dx-select-box
        [(value)]="newChannel.visibility"
        [dataSource]="channelVisibility"
        >

        </dx-select-box>
    </div>

我的组件：

channelVisibility = EChannelVisibility;
newChannel = new Channel();

Enum 类型 EChannelVisibility 是 Channel 类的属性。如果我尝试在上面的 HTML 中实现它，我会收到此错误：

【问题讨论】：

标签： angular typescript frontend devextreme

【解决方案1】：

另一种方法是从您的枚举构造一个字符串数组。

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

enum EChannelVisiblity {
  Up = 'UP',
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT'
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  visibility!: any;
  channelVisibility!: any;

  constructor() {
    var arr = [];
    for (var i in EChannelVisiblity) {
      arr.push(i.toString());
    }

    this.channelVisibility = arr;
  }
}

【讨论】：