angular - ng2-Charts は最初のロードで情報が入力されていません

Question

いくつかの情報を表示するだけの ng2-charts 実装があります。テーブルとグラフの 2 つのタブがあります。最初に最初のタブに入ったとき、折れ線グラフは空ですが、タブに戻ると情報が読み込まれます。

ここに私の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>

さらにコードを提供する必要がある場合は、私に尋ねてください。今のところはこれで十分だと思います。私が今抱えている問題は、チャートが表示されていることですが、彼の情報が表示されるまで待つ必要があります。この詳細ビューの「メイン」ルート解決を実装して、これを修正する必要がありますか?