javascript - 在为图表动态创建持有者后渲染图表不起作用

Question

我在这里的时间做错了，但无法弄清楚是什么。

如果我创建具有 1000 毫秒超时的图表，它们会正确呈现。否则，如果我尝试在构造函数或早期生命周期 Hook 中获取数据，然后在 HighCharts 之后的某个地方在另一个 Hook 中呈现，将找不到具有投影到模板中的 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 的模板:

 <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>

Answer 1

遗憾的是我找不到解决方案，只能找到解决方法。我等待 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);
    });