Angular 9 chartJs在数据更新后不更新视图

Question

一开始一切都很好。 这个 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。

Answer 1

终于找到解决办法了。

  ngOnInit() { 
this.sharevariableService.getApkHistoryDto().subscribe((apkHistory) => { 

 if(apkHistory != null) { 
   this.isLoading = true; setTimeout (() => { 
     this.loadInstallEvolution(apkHistory); 
 }, 10); } 

}); } 

当加载为真时，我显示一个微调器而不是 gapgh