如何将枚举作为DevExtreme SelectBox的数据源并解决绑定报错

报错的核心原因是：DevExtreme SelectBox的[dataSource]属性要求传入数组类型，但你直接赋值的TypeScript枚举本质是键值双向映射的普通对象，不符合数据源格式要求。

• 步骤1：在组件中将枚举转换为符合要求的数组数据源
  两种常见场景的转换代码：
  场景1：枚举值需要同时显示枚举名称（Key）和对应值（Value），适用数值枚举/字符串枚举

// 组件类代码
import { EChannelVisibility } from 'xxx'; // 替换为你实际的枚举导入路径

export class YourComponent {
  channelVisibilityOptions: { label: string, value: EChannelVisibility }[];
  newChannel = new Channel();

  ngOnInit() {
    // 枚举转数组，过滤数值枚举的双向映射重复项
    this.channelVisibilityOptions = Object.keys(EChannelVisibility)
      .filter(key => isNaN(Number(key)))
      .map(key => ({
        label: key,
        value: EChannelVisibility[key as keyof typeof EChannelVisibility]
      }))
  }
}

场景2：仅需要枚举值作为选项，适用字符串枚举

// 组件类代码
channelVisibilityOptions = Object.values(EChannelVisibility);

• 步骤2：调整HTML模板的SelectBox绑定
  对应场景1的模板代码：

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

对应场景2的模板代码无需额外配置displayExpr和valueExpr，直接替换数据源变量名即可。

内容的提问来源于stack exchange，提问作者TheNinthOne