ng2-Charts 首次加载时未填充信息

Question

我有一个 ng2-charts 实现，我只在其中显示一些信息。我有两个选项卡，一个带有 table，另一个带有图表。当我最初进入第一个选项卡时，折线图是空的，但在我切换回该选项卡后，信息已加载。

这是我的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>

我有一个加载信息的父组件，因此子组件（图表选项卡和 table 选项卡）可以使用此信息。

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

如果我需要提供更多代码，请询问我，但我认为现在已经足够了。我现在遇到的问题是图表正在显示，但它应该等到有他的信息时才显示。我是否应该通过为此详细视图实施 'main' 路由解析来解决此问题？

Answer 1

通过向我的组件添加 resolve 解决了这个问题。 https://angular.io/docs/ts/latest/api/router/index/Resolve-interface.html

ng2-Charts 首次加载时未填充信息

ng2-Charts is not filled with information first load

typescript

ng2-charts

angular