0
私はいくつかの情報を表示するだけのng2-chartsの実装をしています。私はテーブルとグラフの2つのタブを持っています。最初に最初のタブを入力すると折れ線グラフは空になりますが、タブに戻ると情報が読み込まれます。ここで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>
は私に尋ねるが、私は、これは今のところ十分だと思います。私が今持っている問題は、チャートが表示されていることですが、彼の情報がいつ表示されるのを待つべきです。私はこの詳細なビューのための 'メイン'ルート解決を実装するとこれを修正する必要がありますか？