ng2-Charts沒有充滿信息第一次加載

Question

我有一個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> 

如果我需要提供更多的代碼問我，但我認爲這是夠了。我現在面臨的問題是圖表正在顯示，但它應該等待顯示具體信息的時間。我是否應該通過爲此詳細視圖實施「主要」路線解決方案來解決此問題？

Answer 1

通過向我的組件添加解析來解決此問題。 https://angular.io/docs/ts/latest/api/router/index/Resolve-interface.html