angular - Angular 6 服务数据不填充 ngx 图表

Question

我正在从 Angular 服务中提取数据并尝试填充和 ngx 条形图。

export class CustomersComponent implements OnInit {

  customers: Customer[];

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

  view: any[] = [700, 400];

  // options for the chart
  showXAxis = true;
  showYAxis = true;
  .......

我正在遍历数据以获取单个结果，然后将它们传递给图表。

ngOnInit(): void {
this.getCustomers();
this.customerService.getCustomers().subscribe(res => res.forEach((item, i , res) => {this.single.push({name:(item.firstname), value: (item.age) }) }));
this.single = [...this.single];
console.log(this.single),
(err) => {console.log(err)};
}

我可以在控制台中看到数据，但它不会填充图表。我还注意到我的第一个对象是空的，而下一个对象已经填充。

这可能是图表没有填充数据的原因吗？任何帮助是极大的赞赏。

Answer 1

This is similar problem what i faced,

The solution would bee to manually refresh as follows,

declare a variable _chart as follows,

@ViewChild(BaseChartDirective) private _chart;

you can refresh by using the following function,

 forceChartRefresh() {
    setTimeout(() => {
      this._chart.refresh();
    }, 10);
  }

and call after updating your data,

 this.forceChartRefresh();