Как правильно присвоить стили в ngOnInit?

Question

Всем привет, я новичок в ангуляре и у меня возникла проблема.

  ngOnInit(): void {
let text = document.getElementById('text') as HTMLElement | null ;
let newDom = '';
let animationDelay = 6;

for(let i = 0; i < text.innerText.length; i++)
{
  newDom += '<span class="char">' + (text.innerText[i] === ' ' ? '&nbsp;' : text.innerText[i]) + '</span>';
}

text.innerHTML = newDom;
let length = text.children.length;
for(let i = 0; i < length; i++)
{
    
    text.children[i].style['animation-delay'] = animationDelay * i + 'ms';
}


 }

IDE подсказывает мне TS2339: Property 'style' does not exist on type 'Element' и я не понимаю по какой причине это происходит. Мне подсказали что получать элемент следует с as HTMLElement, но это не решило проблему.

Answer 1

Явно укажите тип

for (let i = 0; i < length; i++) {
  if (text.children[i] instanceof HTMLElement) {
    (text.children[i] as HTMLElement).style['animation-delay'] = animationDelay * i + 'ms';
  }
}

Либо используйте ViewChild В компоненте

export class AppComponent implements OnInit {

  @ViewChild('text', {static: true}) el: ElementRef;

  ngOnInit(): void {
    const element = this.el.nativeElement;
  }
}

В шаблоне укажите ссылку на элемент

  <div #text>
    ...
  </div>

БЛОГ НА HUSL

Как правильно присвоить стили в ngOnInit?

Ответы (1 шт):