Typescript .push 函数将空对象添加到我的数组

Question

当我将数组推送到 ngx-barchart 时，推送函数向图表添加了一个空对象。我遍历 api 服务并得到这个：

然后我在barchart.component.ts

调用服务

  single: any = [
    {
      "name": [],
      "value": []
    }      
  ];

要推送的函数：

getChartData() { 
    this.storageService.barChart.subscribe(barChart=> {if(barChart) 
        barChart.forEach((i) => {         
          // this.single[0].push({name: (i.skill_name), value: (i.score)})          
          this.single.push({name: (i.skill_name), value: (i.score)});
      });
      this.single=[...this.single];
      console.log(this.single)
    });      
  };

我希望不会将空对象传递到我的图表数据。

我试过添加：

this.single[0].push({name: (i.skill_name), value: (i.score)})

但我收到错误类型错误：_this.single[0].push 不是函数

Answer 1

I'm expecting the to not have an empty object passed to my chart data.

那就不要一开始就创建一个，那是你数据中的空白。

而不是：

single: any = [
  {
    "name": [],
    "value": []
  }      
];

只是：

single: any = [];

旁注 1：除非您想继续向 this.single. 添加越来越多的数据，否则我根本不会在这里使用 push 如果您的意思是 replace this.single 每次，我都会使用 map:

this.single = (barChart || []).map(({skill: {score: value, name}}) => ({name, value}));
// (And no `this.single = [...this.single];` afterward, it's not needed)

旁注 2：由于这是 TypeScript，您可能会受益于此数据的类型：

interface ChartDataEntry {
    name: string;
    value: number; // If it's a number
}

然后

single: ChartDataEntry[] = [];

this.single = ... 行没有改变，TypeScript 可以推断 map 返回的条目类型，并且可以看到它们对该接口有效。

或者，如果您愿意，您可以不声明接口，而只声明内联的条目类型 single:

let single: {name: string, value: number}[] = [];

但是声明类型通常很有用，因为您可能会发现您希望在同一代码的其他地方使用它。

Answer 2

this.single[0] 是对象不是数组

你可以试试：

this.single[0].name = i.skill_name;
this.single[0].value= i.score;

Typescript .push 函数将空对象添加到我的数组

Typescript .push function adds empty object to my array

typescript

push

ngx-charts