我遇到了问题，并且我有一些图形加载了通过HTTP传输的数据，它们具有“选择输入”来选择图形类型。问题在于，当加载视图时，图形什么都不会显示，但是当我在“选择”（如果它们显示值）中更改值时，在执行“拆包”和在OnInit中执行Console.log时，图形中使用的数据正确显示。我知道该体系结构有点沉重，并且没有好的做法，我正在尝试对其进行优化，但是我遇到了这个问题。
并尝试在组件中使用ngOnChanges，以便当它检测到数据集中的更改时会更新信息，但尚未实现。
我留下了不同部分的代码片段，以查看它们可以为我提供的建议。
服务：
public getDebtDynamicsResults(data: DebtDynamicsInput) {
var url = `${ApiEndpoints.modelApiUrl}/${ApiEndpoints.asd_dynamicdebt}`;
return this.commonHttpPost(url, data, null);
}
private commonHttpPost(url: string, data: any, headers: HttpHeaders) {
return this.http.post(url, data, { headers: headers });
}
调用图形的组件和视图：
//Definitions
@ViewChild('balanceGraph') balanceGraph: ChartComponent;
@ViewChild('debtDataGraph') debtDataGraph: ChartComponent;
chartType: string = this.chartTypes[1];
chartLegends: true;
chartLabels = [];
currentChartLabels: Array<any>;
balanceData: Array<any>;
currentBalanceData = [];
debtData: Array<any>;
currentDebtData = [];
//OnInit
ngOnInit(): void {
this.getInitialData();
}
//Methods
getInitialData() {
this.apiService.get(ApiEndpoints.asd_debtdynamicsdata, null).then(
result => {
this.initialData = result.data;
for (var i = result.data.Tini; i <= result.data.Tproy; i ++)
this.years.push(i);
this.filterTables();
this.getdebtDynamicsResult(result.data, {});
},
error => {
this.noData = true;
if(error.result === 'MissingData')
{
this.noResultMessage = error.message.split(',').map(s => s.trim());
console.log(this.noResultMessage);
}
else {
this.gErrorMessage = true;
}
this.isLoading = false;
this.bigLoader = false;
console.error(error);
});
}
private getdebtDynamicsResult(data: any, shocks: any) {
this.sofisApiService.getDebtDynamicsResults(this.getDebtDynamicsInputData(data, shocks)).subscribe((result) => {
this.simulationResults = result;
this.bigLoader = false;
this.isLoading = false;
this.chartsReady = true;
this.dataReady = true;
this.buildCharts(this.simulationResults);
this.chartType = this.chartTypes[0];
this.currentChartColors = this.lineChartColors
if (this.balanceGraph)
this.balanceGraph.reloadChart();
if (this.debtDataGraph)
this.debtDataGraph.reloadChart();
});
}
private buildChartSerie(label, data) {
var series: any = {};
series.data = data;
series.label = label;
return series;
}
private buildCharts(simulationResults) {
this.chartLabels = this.years;
this.currentBalanceData = [];
this.currentDebtData = [];
this.currentBalanceData.push(this.buildChartSerie("base scenary", simulationResults.all_shocks.base_balance_primario_ingreso_total));
this.currentDebtData.push(this.buildChartSerie("base scenary", simulationResults.all_shocks.base_deuda_total_ingreso_total));
//etc etc etc, all data
}
模板：
<div *ngIf="charts">
<div class="content-box no-bg">
<div class="selections">
<span class="title-blue-16">Selección de Shocks:</span>
<div class="dropdown">
<select class="form-control" [(ngModel)]="chartType" (change)="changeChartType()">
<option *ngFor="let type of chartTypes" value="{{type}}">{{type}}</option>
</select>
</div>
</div>
</div>
<div class="graph-boxes" *ngIf="chartsReady">
<div id="balance-container" class="half-box">
<div>
<ul class="chart-options">
<li class="download" (click)="exportChart('balance')">Descargar</li>
<li class="delete" (click)="deleteChart('balance-container')">Eliminar</li>
<li class="drag"></li>
</ul>
<div id="balance">
<h2>Balance Primario / Ingreso Disponible (%)</h2>
<!--<ul class="chart-ref">
<li class="color1">Escenario base</li>
<li class="color2">Tipo de Cambio</li>
<li class="color3">Ingreso Total</li>
<li class="color4">T. de interés - Deuda en moneda extranjera</li>
<li class="color5">T. de interés - Deuda en moneda local</li>
<li class="color6">Todos los Shocks</li>
</ul>-->
<app-chart #balanceGraph class="chart" [datasets]="currentBalanceData"
[labels]="chartLabels" [options]="chartOptions" [colors]="currentChartColors"
[legend]="chartLegends" [chartType]="chartType"></app-chart>
</div>
</div>
</div>
<div id="debt-container" class="half-box">
<div>
<ul class="chart-options">
<li class="download" (click)="exportChart('deuda')">Descargar</li>
<li class="delete" (click)="deleteChart('debt-container')">Eliminar</li>
<li class="drag"></li>
</ul>
<div id="deuda">
<h2>Deuda / Ingreso Disponible (%)</h2>
<!--<ul class="chart-ref">
<li class="color1">Escenario base</li>
<li class="color2">Tipo de Cambio</li>
<li class="color3">Ingreso Total</li>
<li class="color4">T. de interés - Deuda en moneda extranjera</li>
<li class="color5">T. de interés - Deuda en moneda local</li>
<li class="color6">Todos los Shocks</li>
</ul>-->
<app-chart #debtDataGraph class="chart" [datasets]="currentDebtData"
[labels]="chartLabels" [options]="chartOptions" [colors]="currentChartColors"
[legend]="chartLegends" [chartType]="chartType"></app-chart>
</div>
</div>
</div>
</div>
</div>
组件
import { Component, Input, ViewChild } from '@angular/core';
import { BaseChartDirective } from 'ng2-charts';
@Component({
selector: 'app-chart',
templateUrl: './chart.component.html',
styleUrls: ['./chart.component.css']
})
export class ChartComponent {
@Input() datasets;
@Input() labels;
@Input() options;
@Input() colors;
@Input() legend;
@Input() chartType;
@ViewChild('baseChart') chart: BaseChartDirective;
public reloadChart() {
if (this.chart !== undefined) {
this.chart.chart.destroy();
this.chart.chart = 0;
this.chart.datasets = this.datasets;
this.chart.labels = this.labels;
this.chart.options = this.options;
this.chart.colors = this.colors;
this.chart.legend = this.legend;
this.chart.chartType = this.chartType;
this.chart.ngOnInit();
}
}
}
模板：
<div style="display: block;">
<canvas baseChart #baseChart="base-chart" width="400" height="250" [datasets]="datasets" [labels]="labels" [options]="options" [colors]="colors" [legend]="legend" [chartType]="chartType"></canvas>
</div>
这是这些图形所涉及的摘要代码。
我需要在数据集数据到达时以及每次更改数据时将图形加载到屏幕上。我真的考虑了很多，但找不到解决方法。