在Angular中如何绑定键值对对象的键与值属性？

问题核心 #

ASP.NET Core 序列化 Dictionary 到前端时会转为普通 JS 对象，而非键值对数组或 Map 类型，dx-gallery 的 dataSource 要求传入数组结构，因此无法直接遍历获取键值。

实现方案 #

1. TS 侧预处理数据
   将后端返回的原始对象转换为包含 key、value 属性的适配数组：

// 自定义MyObj类型匹配后端结构
interface MyObj {
  X: number;
  // 其余属性按需补充
}

// 后端返回的原始字典数据类型
type RawDictData = Record<string, MyObj[]>;

// 接口请求拿到原始数据后做转换
const rawData: RawDictData = 接口返回的data;
export const galleryDataSource = Object.entries(rawData).map(([key, value]) => ({ key, value }));

2. 调整HTML绑定语法
   绑定处理后的数组，同时修正 dxi-series 的 valueField 配置：因为 item.value 已经是 MyObj 类型的数组，直接取属性 X 即可，无需加额外前缀：

<dx-gallery [dataSource]="galleryDataSource">
  <div *dxTemplate="let item of 'item'">
    <dx-chart [dataSource]="item.value">
      <dxi-series [name]="item.key" valueField="X"></dxi-series>
      <!-- 其余图表配置保持不变 -->
    </dx-chart>
  </div>
</dx-gallery>

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