0

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

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

如果我需要提供更多代码问我，但我认为这已经足够了。我现在遇到的问题是图表正在显示，但它应该等待显示何时显示他的信息。我应该通过为此详细视图实施“主要”路线解析来解决此问题吗？

4

1 回答 1

0

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

于 2016-12-08T15:00:51.970 回答