Angular 我在海图上出错了。例如；错误类型错误：无法读取属性'；系列'；“未定义”的定义；

我在HighCharts图表上看到了如下错误：

错误的图像是：

这是我的angular应用程序，在这里我遇到了这种错误。 component.ts文件代码如下：

  highchartspie = Highcharts;
  StatuschartOptions:{};
  HomeDashboardData;
  TodayDueandOverDue;
  MyBugsList;

  displayedColumns = ['assignee', 'bugtitle', 'icon', 'date'];
  constructor(private http:HttpClient,
    private route:ActivatedRoute,
    private Spinner:NgxSpinnerService,
    private dialog:MatDialog) {}


  ngOnInit(){
    this.Spinner.show();
    this.http.get(this.baseURI+'Projects/HomeDashboard?userid='+this.userid+'').subscribe(
      (data:any) => {
        //console.log(data);
        this.HomeDashboardData=data;
        this.TodayDueandOverDue=data.allOverDuebugs;
        this.MyBugsList = data.myOpenbugsList;
        this.StatuschartOptions = {
          chart : {
            plotBorderWidth: null,
            plotShadow: false
          },
          legend: {
            align: 'right',
            layout: 'vertical',
            verticalAlign: 'top',
            labelFormatter: function () {
                return this.name + ' - ' + this.y;
            }
          },
          title : {
            text: null
          },
          tooltip: {
            useHTML: true,
            formatter: function () {
                return '<div>Status : ' + this.point.name + '</div><div style="text-align:center;">Count : ' + this.point.y + '</div>';
            }
          },
          plotOptions : {
            pie: {
              allowPointSelect: true,
              cursor: 'pointer',
              dataLabels: {
                enabled: false
              },
              showInLegend: true
            }
          },
          credits:{
            enabled: false
          },
          series : [{
              type: 'pie',
              data: [{
                name: 'Fixed',
                y: parseInt(this.HomeDashboardData.allProjectBugStatusChart.split('::')[0])
            }, {
                name: 'Open',
                y: parseInt(this.HomeDashboardData.allProjectBugStatusChart.split('::')[1]),
                color: '#32AE47'
            }, {
                name: 'Close',
                y: parseInt(this.HomeDashboardData.allProjectBugStatusChart.split('::')[2]),
                color: '#F44336'
            }, {
                name: 'Pending',
                y: parseInt(this.HomeDashboardData.allProjectBugStatusChart.split('::')[3])
            }, {
                name: 'Reject',
                y: parseInt(this.HomeDashboardData.allProjectBugStatusChart.split('::')[4])
            }, {
                name: 'Irreproducible',
                y: parseInt(this.HomeDashboardData.allProjectBugStatusChart.split('::')[5]),
                color: 'rgb(67, 67, 72)'
            }]
          }]
        };
    )
  }

highchartspi=Highcharts；
状态图表选项：{}；
家庭仪表盘数据；
今天到期未付；
MyBugsList；
displayedColumns=['assignee'，'bugtitle'，'icon'，'date']；
构造函数（私有http:HttpClient，
专用路由：激活的路由，
私人微调器：NgxSpinnerService，
专用对话框：MatDialog）{}
恩戈尼尼特（）{
this.Spinner.show（）；
this.http.get（this.baseURI+'Projects/HomeDashboard？userid='+this.userid+''）。订阅(
（数据：任何）=>{
//控制台日志（数据）；
this.HomeDashboardData=数据；
this.todaydeand过期=data.allowerduebug；
this.MyBugsList=data.myOpenbugsList；
this.StatuschartOptions={
图表：{
plotBorderWidth:null，
plotShadow:false
},
图例：{
对齐：“右”，
布局：“垂直”，
垂直排列：“顶部”，
labelFormatter:函数（）{
返回this.name+'-'+this.y；
}
},
标题：{
文本：空
},
工具提示：{
是的，
格式化程序：函数（）{
返回“状态：”+this.point.name+“计数：”+this.point.y+”；
}
},
打印选项：{
馅饼：{
allowPointSelect:true，
光标：“指针”，
数据标签：{
已启用：false
},
showInLegend：对
}
},
学分：{
已启用：false
},
系列：[{
键入“pie”，
数据：[{
名称：'固定'，
y:parseInt（this.HomeDashboardData.allProjectBugStatusChart.split（“：”）[0]）
}, {
名称：'打开'，
y:parseInt（this.HomeDashboardData.allProjectBugStatusChart.split（“：”）[1]），
颜色：“#32AE47”
}, {
名称：“关闭”，
y:parseInt（this.HomeDashboardData.allProjectBugStatusChart.split（“：”）[2]），
颜色：“#F44336”
}, {
名称：'待定'，
y:parseInt（this.HomeDashboardData.allProjectBugStatusChart.split（“：”）[3]）
}, {
名称：“拒绝”，
y:parseInt（this.HomeDashboardData.allProjectBugStatusChart.split（“：”）[4]）
}, {
名称：“无法生产”，
y:parseInt（this.HomeDashboardData.allProjectBugStatusChart.split（“：”）[5]），
颜色：'rgb（67,67,72）'
}]
}]
};
)
}

我的component.html文件如下所示：

  <div>
    <highcharts-chart
      [Highcharts] = "highchartspie"
      [options] = "StatuschartOptions"
      style = "width:100%;height: 270px;display: block;">
    </highcharts-chart>
  </div>

---

因此，如果有人能帮我解决这个问题，请拿出您最好的解决方案。我们将感谢您的每一个解决方案。

当初始化

highcharts chart

组件时，

StatuschartOptions

尚未定义。这是因为您正在使用http调用获取数据。解决此问题的一种方法是添加一个

*ngIf

：

  <div>
    <highcharts-chart *ngIf="StatuschartOptions"
      [Highcharts] = "highchartspie"
      [options] = "StatuschartOptions"
      style = "width:100%;height: 270px;display: block;">
    </highcharts-chart>
  </div>

---

初始化

highcharts图表

组件时，

状态图表选项

尚未定义。这是因为您正在使用http调用获取数据。解决此问题的一种方法是添加

*ngIf

：

  <div>
    <highcharts-chart *ngIf="StatuschartOptions"
      [Highcharts] = "highchartspie"
      [options] = "StatuschartOptions"
      style = "width:100%;height: 270px;display: block;">
    </highcharts-chart>
  </div>