ng2-Charts ist nicht mit Informationen gefüllt zuerst laden

Question

Ich habe eine ng2-Charts-Implementierung, in der ich nur einige Informationen anzeigen. Ich habe zwei Tabs, eins mit einer Tabelle und eins mit Graphen. Wenn ich anfänglich die erste Registerkarte betrete, ist das Liniendiagramm leer, aber nachdem ich zu der Registerkarte zurückgekehrt bin, werden die Informationen geladen.

Hier ist meine 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);    
     } 
    } 
} 

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

ich eine übergeordnete Komponente haben, die die Informationen, so dass die Kinder (die Registerkarte Diagramm und die Tabelle Tab) lädt verwenden können diese Information.

Diese HTML sieht wie folgt aus:

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

Wenn ich brauche mich fragen, mehr Code zur Verfügung zu stellen, aber ich denke, das ist jetzt genug. Das Problem, das ich jetzt habe, ist, dass das Diagramm angezeigt wird, aber es sollte mit dem Zeigen warten, wenn es seine Informationen hat. Soll ich das beheben, indem ich eine "Haupt" -Route für diese Detailansicht auflösen lasse?

Answer 1

Dies wurde gelöst, indem ich meiner Komponente Entschlossenheit hinzufügte. https://angular.io/docs/ts/latest/api/router/index/Resolve-interface.html