«ОШИБКА TypeError: Невозможно прочитать свойство '0' из неопределенного» при обновлении диаграммы

Question

Я пытаюсь обновить диаграмму ng2-диаграмм, но я получаю эту ошибку: "ОШИБКА 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

Так что из ошибки this.dataSets не определено. Вы регистрируете консоль после выполнения следующих действий

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

Так что я могу только предположить, что одна из этих функций помещает данные в this.dataSets. Попробуйте добавить console.log над этой строкой if (this.datasets[0]['label'] !== undefined) {, чтобы проверить, равна ли переменная undefined, прежде чем проверять ее в операторе if.

Если это так, вам нужно убедиться, что оно определено, прежде чем обращаться к свойству [0].

Надеюсь, это поможет.

Answer 2

Это потому, что в вашем html вы ссылаетесь на переменную с помощью оператора .[0], который является нулевым или неопределенным.

Чтобы избежать подобных распространенных проблем, вы инициализировали все переменные, которые вы собираетесь использовать в шаблонах.

Например, например: в коде взрыва (ваш 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;
    }
  }

Так что, как решение всегда, используйте нулевую проверку перед доступом к любому дочернему элементу. И никогда не используйте variable[index].property жестко закодированным способом в вашем шаблоне, если вы не инициализируете 0-е значение из своего кода.