ng2-Charts没有充满信息第一次加载

问题描述：

我有一个ng2-charts实现，其中我只显示一些信息。我有两个选项卡，一个是表格，一个是图形。当我最初输入第一个标签时，折线图是空的，但在切换回标签后，信息被加载。ng2-Charts没有充满信息第一次加载

这里是我的Component.ts

import { Component, OnInit, EventEmitter, Input, Output } from '@angular/core'; 

import { OtamObject } from '../../../shared/models/otam-object'; 
import { SensorDataOverviewEntity } from '../../../shared/models/sensordata-overview-entity'; 

@Component({ 
    moduleId: module.id, 
    selector: 'tab-charts-object-detail', 
    templateUrl: 'tab-charts.object-detail.component.html' 
}) 

export class TabChartsObjectDetailComponent implements OnInit { 
    @Input() otamObject: OtamObject; 
    @Input() sensorDataOverviewEntity: SensorDataOverviewEntity[]; 

    batteryData: number[] = []; 

    datasets = <any>[ 
     { 
      label: '% of Battery', 
      data: this.batteryData 
     } 
    ] 

    labels = <any>[]; 

    options = { 
     scales: { 
      yAxes: [{ 
       ticks: { 
        beginAtZero: true 
       } 
      }] 
     } 
    }; 

    constructor() { 
    } 

    ngOnInit() { 
     for (let item of this.sensorDataOverviewEntity) { 
      //create local variables: 
      var batteryData: number; 
      var dateString: any; 

      //assign value out of SensorDataOverviewEntity 
      dateString = String(item.SendDate); 
      batteryData = Number(item.Battery); 

      //push to array 
      this.batteryData.push(batteryData); 
      this.labels.push(dateString); 
      console.log(this.labels);    
     } 
    } 
}

的HTML：

<div class="row"> 
    <div class="col-lg-6"> 
     <div style="display:block"> 
      <div class="card-block"> 
       <canvas baseChart class="chart" [datasets]="datasets" [labels]="labels" [options]="options" [chartType]="'line'"> 
       </canvas> 
      </div> 
     </div> 
    </div> 
</div>

我有它加载所以孩子的信息（图表选项卡，表选项卡）父组件可以使用此信息。

此HTML看起来像这样：

<div class="col-lg-12"> 
    <ngb-tabset> 
     <ngb-tab> 
      <template ngbTabTitle><b>Charts</b></template> 
      <template ngbTabContent> 
       <tab-charts-object-detail [otamObject]="otamObject" [sensorDataOverviewEntity]="sensorDataOverviewEntity"> </tab-charts-object-detail> 
      </template> 
     </ngb-tab> 
     <ngb-tab title="Lijst"> 
      <template ngbTabContent> 
       <tab-list-object-detail [otamObject]="otamObject" [sensorDataOverviewEntity]="sensorDataOverviewEntity"> </tab-list-object-detail> 
      </template> 
     </ngb-tab> 
    </ngb-tabset> 
</div>

如果我需要提供更多的代码问我，但我认为这是够了。我现在面临的问题是图表正在显示，但它应该等待显示具体信息的时间。我是否应该通过为此详细视图实施“主要”路线解决方案来解决此问题？

答

通过向我的组件添加解析来解决此问题。 https://angular.io/docs/ts/latest/api/router/index/Resolve-interface.html

ng2-Charts没有充满信息第一次加载

相关推荐