ng2-Графики не заполнены информацией с первой загрузкой

Question

У меня есть реализация схем ng2-диаграмм, в которых я просто показываю некоторую информацию. У меня есть две вкладки с таблицей и одна с графами. Когда я изначально вхожу в первую вкладку, линейная диаграмма пуста, но после того, как я вернусь на вкладку, информация будет загружена.

Вот мой 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