![](/img/trans.png)
[英]value not updating in the view after data update , angular2 and typescript
[英]Angular 9 chartJs is not updating view after data update
一開始一切都很好。 這個 function 在選擇時間范圍(LAST_SEVEN_DAYS、LAST_THIRTY_DAYS 等...)時被調用。 function 調用后端並獲取結果然后更新視圖
loadInstallEvolution(periodRange, label) {
this.selectedRatingRangeLabel = label;
const apkIdToUse = sessionStorage.getItem(url.apkIdInUse);
this.installChartData.datasets[0].data = [0, 0, 0, 0, 0, 0, 0];
this.installChartData.labels = [];
this.isLoading = true;
if (!apkIdToUse) {
this.isNoDataFound = true;
} else {
// tslint:disable-next-line:no-unused-expression
const param = { historyRange : periodRange, apkId : Number(apkIdToUse)};
this.searchApkControllerService.findInstallHistoryUsingGET(param).subscribe(
(reviewList) => {
let index = 0;
let max = 0;
let firstValue = 0;
for (let [key, value] of Object.entries(reviewList)) {
// change the date format
if (periodRange === 'LAST_SEVEN_DAYS' || periodRange === 'LAST_THIRTY_DAYS' ) {
key = this.datepipe.transform(key, 'MM/dd');
}
this.installChartData.datasets[0].data[index] = value;
this.installChartData.labels[index] = key;
// get first value;
if (index === 0) {
firstValue = value;
}
// calculate the max of y axis
if (max < value) {
max = value;
}
index++;
}
// update the axis
this.chartDataConfig.areaChartOptions.scales.yAxes[0].ticks.max = max + 20;
this.chartDataConfig.areaChartOptions.scales.yAxes[0].ticks.beginAtZero = false;
this.isLoading = false;
},
(error) => {
this.notifications.create(
'Error',
error.error.message,
NotificationType.Error,
{ theClass: 'outline primary', timeOut: 6000, showProgressBar: false }
);
this.isLoading = false;
}
);
}
}
因為,我有多個圖表,而不是對每個圖表進行多次調用,我決定進行一次調用,然后在有新數據可用時更新所有圖表。
我當時加了
ngOnInit() {
this.sharevariableService.getApkHistoryDto().subscribe((apkHistory) => {
if(apkHistory != null) {
this.loadInstallEvolution(apkHistory);
}
});
}
然后我的 function 變為:
loadInstallEvolution(apkHistoryDto: ApkHistoryDto) {
console.log("loadInstallEvolution apps install");
const apkIdToUse = sessionStorage.getItem(url.apkIdInUse);
this.installChartData.datasets[0].data = [0, 0, 0, 0, 0, 0, 0];
this.installChartData.labels = [];
this.isLoading = true;
if (!apkIdToUse) {
this.isNoDataFound = true;
} else {
let index = 0;
let max = 0;
let firstValue = 0;
for (let [key, value] of Object.entries(apkHistoryDto.installHistory)) {
// change the date format
if (apkHistoryDto.historyRange === 'LAST_SEVEN_DAYS' || apkHistoryDto.historyRange === 'LAST_THIRTY_DAYS' ) {
key = this.datepipe.transform(key, 'MM/dd');
}
this.installChartData.datasets[0].data[index] = value;
this.installChartData.labels[index] = key;
// get first value;
if (index === 0) {
firstValue = value;
}
// calculate the max of y axis
if (max < value) {
max = value;
}
index++;
}
// update the axis
//this.installChartData.datasets[0].data = [...this.installChartData.datasets[0].data];
console.log(this.installChartData);
this.chartDataConfig.areaChartOptions.scales.yAxes[0].ticks.max = max + 20;
this.chartDataConfig.areaChartOptions.scales.yAxes[0].ticks.beginAtZero = false;
this.isLoading = false;
}
}
有了這個新的 function,我的圖表沒有更新。 變量設置正確但無法更新視圖。
在我的app-install-eveolution-chart.component.html
我有:
<app-area-chart [shadow]="true" class="chart" [options]="chartDataConfig.areaChartOptions"
[data]="installChartData"></app-area-chart>
app-area-chart
是另一個組件 area-chart.component.html
<div [class]="class"><canvas #chart></canvas></div>
和area-chart.component.ts
export class AreaChartComponent implements AfterViewInit, OnDestroy {
@Input() shadow = false;
@Input() options;
@Input() data;
@Input() class = 'chart-container';
@ViewChild('chart', { static: true }) chartRef: ElementRef;
chart: Chart;
public constructor() {
Chart.defaults.global.defaultFontColor = 'white';
}
ngAfterViewInit() {
if (this.shadow) {
Chart.defaults.lineWithShadow = Chart.defaults.line;
Chart.controllers.lineWithShadow = Chart.controllers.line.extend({
draw(ease) {
Chart.controllers.line.prototype.draw.call(this, ease);
const chartCtx = this.chart.ctx;
chartCtx.save();
chartCtx.shadowColor = 'rgba(0,0,0,0.15)';
chartCtx.shadowBlur = 10;
chartCtx.shadowOffsetX = 0;
chartCtx.shadowOffsetY = 10;
chartCtx.responsive = true;
chartCtx.stroke();
Chart.controllers.line.prototype.draw.apply(this, arguments);
chartCtx.restore();
}
});
}
console.log("coding is awesome for brain");
const chartRefEl = this.chartRef.nativeElement;
const ctx = chartRefEl.getContext('2d');
this.chart = new Chart(ctx, {
type: this.shadow ? 'lineWithShadow' : 'line',
data: this.data,
options: this.options
});
}
ngOnDestroy() {
if (this.chart) {
this.chart.destroy();
}
}
}
我嘗試了許多解決方案但沒有成功。 在測試期間,使用第一個舊解決方案,在每個新數據之后,我可以進入ngAfterViewInit
並擁有我的 console.log。 使用新的解決方案,我只是第一次有這個,而不是當我有更新時,什么都沒有發生。
請問,你有什么想法嗎? 請問有什么幫助嗎? 謝謝
編輯:我通過在組件中使用ngOnInit
來自動檢測更改來嘗試解決方案,但是仍然沒有調用這個 function。
終於找到解決辦法了。
ngOnInit() {
this.sharevariableService.getApkHistoryDto().subscribe((apkHistory) => {
if(apkHistory != null) {
this.isLoading = true; setTimeout (() => {
this.loadInstallEvolution(apkHistory);
}, 10); }
}); }
當加載為真時,我顯示一個微調器而不是 gapgh
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.