如何使用Observable数据填充Ng2 Charts并解决类型转换与平均值计算问题

你的报错由两个问题导致：

• 赋值对象错误：你定义的ChartData是ChartDataSets类型的数组，访问数据集的data属性需要指定数组下标，即this.ChartData[0].data，而非直接访问this.ChartData.data
• 类型不匹配：Observable返回的name字段为字符串类型，可直接在pipe调用链中通过Number()完成类型转换，无需额外处理。

修复类型问题的代码示例：

public ChartData: ChartDataSets [] = [
  {data: [], label: 'Average'},
];
this.tasks.pipe(
  map(taskList => taskList.map(item => Number(item.name)))
).subscribe(result => {
  this.ChartData[0].data = result;
});

你不需要额外编写独立的平均值计算模块，直接在Observable的pipe链中追加一步计算逻辑即可：

public ChartData: ChartDataSets [] = [
  {data: [], label: 'Average'},
  // 如需同时展示原始数值可追加第二个数据集
  // {data: [], label: '原始数值'}
];
this.tasks.pipe(
  map(taskList => taskList.map(item => Number(item.name))),
  map(numList => {
    // 处理空数组边界，避免除以0报错
    if (numList.length === 0) return [0];
    // 求和后计算平均值
    const total = numList.reduce((acc, current) => acc + current, 0);
    const average = total / numList.length;
    // 若要同时返回原始数值和平均值，可在此处返回数组：[numList, [average]]
    return [average];
  })
).subscribe(averageResult => {
  this.ChartData[0].data = averageResult;
  // 若返回了原始数值，可同步赋值给第二个数据集：this.ChartData[1].data = originalNumList;
});

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