Javascript 在为图表动态创建支架后呈现图表不会'；行不通

我在这里的时间安排有问题，但我不知道是什么

如果我创建1000毫秒超时的图表，它们会正确渲染。 否则，如果我尝试在构造函数或早期生命周期钩子中获取数据，然后在HighCharts找不到id投影到模板中的后的某个地方在另一个钩子中渲染，那么它将不会渲染。开发工具将div显示为存在，但它不是在函数调用时显示的

我想在构建和更新功能之前正确解决这个问题。谢谢你的帮助

XyComponent.ts：

 export class XYComponent implements OnInit {
     public chartsHolder: ChartObject[];
     public Response: ResponseDto[];
     public xyInfo: XyInfoObject[];

     constructor(
         private dataService: xyzService
     ) {    

     }

     ngOnInit() {
         this.getChartData();
         setTimeout(() => {
             this.chartsHolder = new Array<Highcharts.ChartObject>();
             this.xyInfo.forEach((element) => {

                 this.chartsHolder.push(Highcharts.chart(element.chartHolderId, <any>this.createChartOptions(element.chartName, 250, 250, element.displayValue / 1000000)));
             });
         }, 1000);
     }

     //ngAfterViewInit() {
     //    this.chartsHolder = new Array<Highcharts.ChartObject>();
     //    this.xyInfo.forEach((element) => {
     //        
     //        this.chartsHolder.push(Highcharts.chart(element.chartHolderId, <any>this.createChartOptions(element.chartName, 250, 250, element.displayValue / 1000000)));
     //    });
     //}

     private getChartData() {
         this.xyInfo = new Array<xyInfoObject>();
         this.dataService.getXyInfo().then((value) => {
             for (var i = 0; i < value.length; i++) {
                 this.xyInfo.push(this.CreateDesiredObjectFromResponseDto(value[i], i));
             }
         });
         // Nor does it work if I apply the code here in a .then function
         //.then(() => {
         // this.chartsHolder = new Array<Highcharts.ChartObject>();
         // this.xyInfo.forEach((element) => {
         //         this.chartsHolder.push(Highcharts.chart(element.chartHolderId, <any>this.createChartOptions(element.chartName, 250, 250, element.displayValue / 1000000)));
         //     }); 
         //});      
     }

导出类XYComponent实现OnInit{
公共chartsHolder:ChartObject[]；
公众回应：回应[]；
公共xyInfo:XYINFOBJECT[]；
建造师(
私有数据服务：xyzService
) {    
}
恩戈尼尼特（）{
这是.getChartData（）；
设置超时（（）=>{
this.chartsHolder=新数组（）；
this.xyInfo.forEach（（元素）=>{
this.chartsHolder.push（Highcharts.chart（element.chartHolderId，this.createChartOptions（element.chartName，250250，element.displayValue/1000000））；
});
}, 1000);
}
//ngAfterViewInit（）{
//this.chartsHolder=新数组（）；
//this.xyInfo.forEach（（元素）=>{
//        
//this.chartsHolder.push（Highcharts.chart（element.chartHolderId，this.createChartOptions（element.chartName，250250，element.displayValue/1000000））；
//    });
//}
私有getChartData（）{
this.xyInfo=新数组（）；
this.dataService.getXyInfo（）。然后（（值）=>{
对于（变量i=0；i{
//this.chartsHolder=新数组（）；
//this.xyInfo.forEach（（元素）=>{
//this.chartsHolder.push（Highcharts.chart（element.chartHolderId，this.createChartOptions（element.chartName，250250，element.displayValue/1000000））；
//     }); 
//});      
}

XyComponent的模板：

 <div class="gauge-grid-container mdl-shadow--8dp">
     <div id="rtd-grid-title" class="">
         <h4 class="">Xy title</h4>
     </div>
     <div class="gauge-grid" *ngFor="let instance of xyInfo">
         <div class="cell">
             <div class="">
                <!-- Here I set the ID, might this do something with the issue? -->
                 <div id="{{instance.chartHolderId}}"></div>
                 <div class="last-update-date">{{instance.displayDate}}</div>
             </div>
         </div>
     </div>
 </div>

Xy标题
{{instance.displayDate}

遗憾的是，我找不到解决方案，只能找到解决办法。我等待http响应，根据响应DTO-s的计数为图表投影html，然后等待一秒钟，这通常足以让客户端应用程序投影html（在许多机器上测试）。然后用数据填充图表

this.dataService.getXYInfo().then((value) => {
        if (value.length > 0) {
            this.dataUnavailable= false;
            for (var i = 0; i < value.length; i++) {
                this.xyInfo.push(this.CreateChartObjectFromDTO(value[i], i));
            }
        }
        else {
            this.dataUnavailable = true;
        }
    }).then(() => {
        /* Wait 1 second before populating */
        setTimeout(() => {
            this.xyInfo.forEach((element) => {
                this.charts.push(Highcharts.chart(element.chartHolderId, <any>this.createChartOptions(element.chartName, this.calculateDimensionsForChart(), this.calculateDimensionsForChart(), element.displayValue)));
                element.isChartRendered = true;
            });

            this.StoreTimer(setInterval(() => {
                this.updateChartData();
            }, 300000));

            this.blockUpdates = false;
        }, 1000);
    }).catch((err) => {
        this.errored = true;
        this.ResetComponent();
        setTimeout(() => {
            this.InitializeComponent();
        }, 10000);
    });

this.dataService.getXYInfo（）.then（（值）=>{
如果（value.length>0）{
this.dataUnavailable=false；
对于（变量i=0；i{
/*等待1秒钟后再填充*/
设置超时（（）=>{
this.xyInfo.forEach（（元素）=>{
this.charts.push（Highcharts.chart（element.chartHolderId，this.createChartOptions（element.chartName，this.calculateDimensionsForChart（），this.calculateDimensionsForChart（），element.displayValue））；
element.ischartredered=true；
});
此.StoreTimer（setInterval（（）=>{
此文件为.updateChartData（）；
}, 300000));
this.blockUpdates=false；
}, 1000);
}).catch（（错误）=>{
this.errored=true；
这个.ResetComponent（）；
设置超时（（）=>{
this.InitializeComponent（）；
}, 10000);
});

为什么不在设置“xyInfo”数组的同一个循环中设置“chartsHolder”？因为调用Highcharts.chart（elementId，…）时必须存在一个div元素函数和模板基于xyInfo数组上的ngFor。我想在xyInfo数组中所有元素的div存在后创建图表，以便根据它们的ID选择它们。从那时起，我意识到我不需要存储所有图表，因为它们已经通过Highcharts.charts存储，我将在那里进行优化，但是问题仍然存在。xyInfo绑定到您的模板，我很确定当您向其提供数据时，*ngFor将填充模板，这样div就会存在。我不明白如果您将.then方法放入其中，为什么这不起作用…首先，因为您处理的是异步，您必须找到一个异步解决方案，以便“chartsHolder”设置将被触发，然后确保加载数据，imo