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

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