Почему subscribe() не видит nativeElement?

Question

[zlodiak]

Пытаюсь динамически установить значения атрибутов для элемента шаблона:

<canvas id='graph' #graph *ngIf="trainings.length"></canvas>

В компоненте присвоение происходит в коллбеке ajax-запроса:

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { TrainingsService } from '../../../services/trainings.service';
import { Training } from '../../../interfaces/training';

@Component({
  selector: 'app-graph',
  templateUrl: './graph.component.html',
  styleUrls: ['./graph.component.scss']
})
export class GraphComponent implements OnInit {

  private basicMeasure: number = 40;
  private trainings: Training[] = [];
  @ViewChild('graph') graph: ElementRef;
  constructor(private trainingsService: TrainingsService) { }

  ngOnInit() {
    this.getTrainings();
  }

  private getTrainings(): void {
    this.trainingsService.getTrainings().subscribe((trainings) => {
      this.trainings = trainings;
      const width = this.trainings.length * this.basicMeasure + 'px';
      const height = '260px';
      this.graph.nativeElement.style.width = width;
      this.graph.nativeElement.style.height = height;
      this.graph.nativeElement.style.backgroundColor = 'cyan';
    });
  }
}

В результате в консоли браузера получаю ошибку:

ERROR TypeError: Cannot read property 'nativeElement' of undefined

Но если присвоение выношу из коллбека, то всё работает без проблем:

ngOnInit() {
    this.getTrainings();

    setTimeout(() => {
      const width = this.trainings.length * this.basicMeasure + 'px';
      const height = '260px';
      this.graph.nativeElement.style.width = width;
      this.graph.nativeElement.style.height = height;
      this.graph.nativeElement.style.backgroundColor = 'cyan';
    }, 1000);
  }

Помогите пожалуйста разобраться почему такая несправедливость происходит?

Answer 1

[Ivan Stroykin]

Ваш graph еще не успевает появиться, а Вы уже пытаетесь к нему обратиться
Как вариант: пример

Comments

[Алексей Зуев]

Такое решение не совсем подходит. Я сломал ваш код) https://stackblitz.com/edit/angular-jskbmy?file=ap... Если с сервера ответ чуть дольше, то будет такая же ошибка

[Ivan Stroykin]

Алексей Зуев, Ох, спасибо. Как всегда, вы на высоте)
Не знаю на сколько это корректно будет, но можно с уже полученными данными сделай незаметную задержку - ссылка

[Алексей Зуев]

Да, запуск макротаска через setTimeout конечно поможет. Может еще варианты есть?)

[Ivan Stroykin]

Алексей Зуев, В такие моменты приходит понимание, что еще во многом нужно разобраться)
Как вариант наиболее оптимальный и правильный?)

[Алексей Зуев]

Иван Стройкин, Как минимум 5 вариантов еще есть) Один внизу написали. Второй, к примеру, использование сеттера для ViewChild https://ng-run.com/edit/0vEqLQZHTZV2UgYycJJa

[Ivan Stroykin]

Алексей Зуев, а еще 3?) Какой же в общем итоге наиболее оптимален?)

[Алексей Зуев]

Иван Стройкин, Почти все оптимальны. Один средне оптимален, а setTimeout меньше всего оптимален)

[Ivan Stroykin]

Алексей Зуев, в топку setTimeout )

Answer 2

[Demian Smith]

Потому что на момент выполнения кода в subscribe(), элемента с id=graph еще не существует. *ngIf отрисует этот элемент не мгновенно после this.trainings = trainings, а только после выполнения функции subscribe().

Для того чтоб код не имел неприятного запаха из-за setTimeout(), можно передавать trainings в GraphComponent извне. Тогда это будет выглядеть как-то так:

<app-graph  [trainings]="trainings" *ngIf="trainings.length"></app-graph>