Question

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

如果我创建具有1000ms超时的图表，则它们将正确渲染。否则，如果我尝试在构造函数中或早期生命周期挂钩中获取数据，然后在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的模板：

 <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的计数为图表投影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);
    });

动态为其创建持有人后呈现图表不起作用

1 个答案: