无法读取未定义HighCharts的属性'系列'

Question

想获取具有图表类型和所有内容的完整数据，但我得到此错误无法读取未定义的属性'series'。

这是component.ts和服务文件

const sampleData: Overview[] = [
      {
        chart: {
          type: 'column',
        },
        title: {
          text: 'Total Predected Revenue Vs Actual Revenue',
        },
        xAxis: {
          categories: [
            '2010',
            '2011',
            '2012',
            '2013',
            '2014',
            '2015',
            '2016',
            '2017',
          ],
          crosshair: true,
        },
        yAxis: {
          min: 0,
        },
        series: [
          {
            name: 'Predected',
            data: [14, 17, 9, 10, 6, 19, 6, 8],
          },
          {
            name: 'Actual',
            data: [65, 74, 44, 66, 9, 23, 36, 51],
          },
        ],
      }
    ];

这是.ts文件

data: Overview[] = [];

private onLoaded(state: OverviewLoadedState) {
    const me = this;
    me.data = state.data;
    me.error = false;
    me.loading = false;
    console.log(me.data)
  }

这里是.html

<div *ngIf="data">
        <highcharts-chart style="width: 100%; display: block" [Highcharts]="Highcharts" [options]="data"
            [(update)]="updateDemo" [runOutsideAngular]=true>
        </highcharts-chart>
    </div>

帮助我解决这个错误。

Answer 1

Probelm在您的if条件中处于模板中，请将其更改为：-

<div *ngIf="data?.length > 0">
        <highcharts-chart style="width: 100%; display: block" [Highcharts]="Highcharts" [options]="data"
            [(update)]="updateDemo" [runOutsideAngular]=true>
        </highcharts-chart>
    </div>

因为在空白数组的情况下，您的条件也会得到满足。