ngx-charts合并多JSON对象为数据源后如何按名称获取指定对象

问题根因 #

这个报错通常由两个原因导致：

• TypeScript 没有正确识别multiple数组的元素类型，静态检查阶段找不到data1属性的定义
• 你合并生成的multiple数组实际结构不符合预期，multiple[0]下确实不存在data1属性

解决步骤 #

第一步：校验实际数据结构 #

先在代码中打印multiple的实际结构，确认和你的预期是否一致：

console.log('multiple完整结构：', multiple);
console.log('multiple第一个元素：', multiple[0]);

如果打印结果里multiple[0]确实存在data1属性，说明是TypeScript类型检查报错，走第二步处理；如果确实没有data1属性，说明你合并数组的逻辑存在问题，先调整合并逻辑保证数据结构符合预期。

第二步：修复TypeScript类型报错 #

两种方案按需选择即可：

• 方案1：给multiple数组明确定义类型（推荐）

// 先定义单个数组项的结构，data1的类型和你之前正常使用的data1类型保持一致即可
interface MultipleItem {
  data1: {name: string, series: {name: string, value: number}[]}
  // 其他属性按需补充
}
// 声明multiple时指定类型
const multiple: MultipleItem[] = [];

• 方案2：临时跳过类型检查，适合快速调试场景

// 类型断言为any
const targetData = (multiple[0] as any).data1;
// 或者用索引访问的写法
const targetData = multiple[0]?.['data1'];

如果你需要按名称匹配获取目标对象 #

如果你的需求不是取下标为0的项的data1属性，而是要从multiple数组里找到name字段等于DATA1的对象，使用数组find方法即可：

const targetData = multiple.find(item => item.name === 'DATA1');

绑定到组件时建议加非空判断，避免找不到元素时出现报错：

<ngx-charts-bar-vertical-2d
  *ngIf="targetData"
  [results]="targetData"
  <!-- 其他配置项保持不变 -->
></ngx-charts-bar-vertical-2d>

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