Динамически генерируемый метод выдает ошибку «Не удается прочитать свойство« getContext »с нулевым значением» в Angular 4 - PullRequest
Новая
       16

Динамически генерируемый метод выдает ошибку «Не удается прочитать свойство« getContext »с нулевым значением» в Angular 4

0 голосов
/ 15 октября 2018

Есть несколько вопросов SO, которые касаются этой ошибки, но в моем случае у меня есть элементы canvas, которые генерируются динамически в соответствии с длиной массива.Например: если запрос API возвращает массив из 4 объектов, то создаются 4 датчика с идентификаторами, сгенерированными с использованием индекса в цикле ngFor.

Проблема здесь в том, что машинописный код выполняется перед созданием датчика в DOM.Я пытался использовать ngZone и ngAfterViewInit , но ни одна из них не решила проблему.Хотя setTimeout временно решает эту проблему, но вы никогда не знаете, сколько времени занимает выполнение запроса.

Я генерирую canvas в цикле ngFor, как это 

<div class="col" *ngFor="let item of total_count; let i = 'index'">
     <canvas [attr.id]="'g' + i"  width="150"></canvas>  
</div>

И машинописный код для генерациии назначение конфигураций выполняется после получения ответа API, т. е. 

getDataCount() {
  this.commonService.getDataCount(this.params).subscribe(results => {
  this.total_count= results;
  this.gaugeOptions();
}, err => {
});
}

А затем создается датчик с использованием функции gaugeOptions 

var opts = {
  angle: 0, // The span of the gauge arc
  lineWidth: 0.24, // The line thickness
  radiusScale: 0.57, // Relative radius
  pointer: {
    length: 0.61, // // Relative to gauge radius
    strokeWidth: 0.02, // The thickness
    color: '#000000' // Fill color
  },
  limitMax: false,
  // If false, max value increases automatically if value > maxValue
  limitMin: false,     // If true, the min value of the gauge will be fixed
  strokeColor: '#E0E0E0',  // to see which ones work best for you
  generateGradient: true,
  highDpiSupport: true,     // High resolution support

};

  if (this.total_count) {
    for (let i = 0; i < this.total_count.length; i++) {
      if (i == 0) {
        var opts1 = { ...opts, colorStart: '#efb818' };
        var target1 = document.getElementById('g0');
        var gauge1 = new Gauge(target1).setOptions(opts1);
        gauge1.maxValue = this.total_count.membercount;
        gauge1.set(this.membership_count[i].membercount);


      } else if (i == 1) {
        var opts2 = { ...opts, colorStart: '#b1bec5' }
        var target2 = document.getElementById('g1');
        var gauge2 = new Gauge(target2).setOptions(opts2);
        gauge2.maxValue = this.total_count.membercount;
        gauge2.set(this.membership_count[i].membercount);

      }
      //etc upto i = 5 in my usecase
    }
  }
}

Проблема здесь заключается в том, как я могу гарантировать, что gaugeOptions ()функция вызывается после DOM (т.е. все элементы canvas загружаются после вызова API)

...