更新图表时出现“错误TypeError：无法读取未定义的属性'0'”

Question

我正在尝试刷新ng2-charts的图表，但收到此错误：“错误TypeError：无法读取未定义的属性'0'。”

这是我尝试刷新图表的代码段：

ngOnChanges(changes: SimpleChanges): void {
    this.isLoading = true;
    this._updateDatasets(changes.data.currentValue);
    this.isEmptyData = !(this.datasets && this.datasets.length > 0);
    if (this.datasets[0]['label'] !== undefined) {
      this.generateChartColors();
      this.buildDatasetLabels();
      if (this._chart) {
        console.log('changes: ', changes);
        console.log('labels:', this.labels);
        console.log('datasets: ', this.datasets)
        console.log('chart: ', this._chart);
        this._chart.refresh()
      }
    } else {
      this.isLoading = false;
    }
  }

我打印的所有变量（changes，this.labels，this.datasets）都具有正确的数据。 this.labels在this._chart函数中绑定到this.buildDatasetLabels()，并且this.datasets直接绑定到模板中的统计图数据集。

所有这些console.log和this._chart似乎是错误的：

这是错误：

谢谢。

更新：

我在组件中初始化了图表的所有变量（在模板中，我仅访问yAxes刻度的最大值和最小值），但是我仍然遇到相同的错误，但是这次，图表似乎是正确的。

这些是我图表的变量初始化：

datasets = {data: [], label: '', hidden: false}

chartColors: Array<any> = [{ // Default colors
    backgroundColor: 'rgba(148,159,177,0.2)',
    borderColor: 'rgba(148,159,177,1)',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgba(148,159,177,0.8)'
  }];

labels: Array<any> = ['00'];

这是我的模板：

<div class="loading" [ngClass]="{ 'active': isLoading }"><img src="../../assets/img/cloud_load.gif"></div>
<div class="clearfix"></div>
<div class="row">
  <div *ngIf="isEmptyData" class="overlay">
    <h3 class="no-data">No data in this time frame.</h3>
  </div>
  <canvas name="canvas-historical-pipe-data" class="canvas-monitored-pipes_historical_data" baseChart height="350"
          [datasets]="datasets" [options]="chartOptions" [labels]="labels"
          [colors]="chartColors" [legend]="showLegend" [chartType]="chartType"
          (chartHover)="onChartHover($event)" (chartClick)="onChartClick($event)"></canvas>
</div>
<div class="row">
  <div class="col-xs-4">
    <div class="row">
      <form class="col-xs-12 center" [formGroup]="degreeForm">
        <img class="svg_icon temperature" src="assets/img/icons/icon_thermometer_default.svg">
        <label for="startTemp" class="margin-left">From: </label>
        <mat-form-field>
          <input id="startTemp" formControlName="startDegree" matInput (change)="chartScaleChange()"
                 [value]="chartOptions.scales.yAxes[0].ticks.min">
        </mat-form-field>
        <label for="endTemp"> To: </label>
        <mat-form-field>
          <input id="endTemp" formControlName="endDegree" matInput (change)="chartScaleChange()"
                 [value]="chartOptions.scales.yAxes[0].ticks.max">
        </mat-form-field>
      </form>
      <div class="col-xs-12 center">
        <button
          [ngClass]="{ 'enabled-button': !dataAutofitted, 'clickable': !dataAutofitted, 'disabled-button': dataAutofitted }"
          (click)="autofit()"
          [disabled]="dataAutofitted">Autofit
        </button>
      </div>
    </div>
  </div>
  <div class="col-xs-8">
    <div class="row">
      <div class="col-xs-4 margin-top" *ngFor="let pipe of data; let pipeIndex = index"
           (click)="hideOrShowPipeData(pipeIndex)">
        <i class="fas fa-circle" [ngStyle]="{'color': chartColors[pipeIndex]['borderColor']}"></i>
        {{ pipe.label }}
      </div>
    </div>
  </div>
</div>

Answer 1

这是因为在您的html中，您使用.[0]运算符引用了一个变量，该变量为null或未定义。

为避免此类常见问题，您已经初始化了将在模板中使用的所有变量。

例如：在自爆代码（您的ngOnInit）中，行号5将中断，因为您正在访问this.datasets[0]['label']，如果数据集为null或未定义，则它将通过未处理的异常。 html文件中可能存在相同类型的错误，导致了上述错误。

ngOnChanges(changes: SimpleChanges): void {
    this.isLoading = true;
    this._updateDatasets(changes.data.currentValue);
    this.isEmptyData = !(this.datasets && this.datasets.length > 0);
    if (this.datasets[0]['label'] !== undefined) {
      this.generateChartColors();
      this.buildDatasetLabels();
      if (this._chart) {
        console.log('changes: ', changes);
        console.log('labels:', this.labels);
        console.log('datasets: ', this.datasets)
        console.log('chart: ', this._chart);
        this._chart.refresh()
      }
    } else {
      this.isLoading = false;
    }
  }

因此，作为一种解决方案，总是在访问任何子级之前使用null检查。除非您要从代码中初始化第0个值，否则切勿在模板中以硬编码方式使用variable[index].property。

Answer 2

因此，由于错误this.dataSets是未定义的。执行以下操作后，您便在控制台上对其进行记录

      this.generateChartColors();
      this.buildDatasetLabels();
      console logs....

因此，我只能假设这些功能之一是将数据放入this.dataSets中。尝试在console.log语句中检查变量之前，在此行if (this.datasets[0]['label'] !== undefined) {上方添加undefined，以检查变量是否为if。

如果是，则需要确保在访问[0]属性之前已定义它。

希望这会有所帮助。