изменить класс элемента через 5 секунд, используя метод в Angular 2+

Question

Я пытаюсь изменить класс определенных элементов на основе вычисления метода через 5 секунд:

<tr *ngFor="let row of items; let i = index">
   ...
   <td #f [ngClass]="getColor(row, f)">Test 1</td>
   <td #f2 [ngClass]="getColor(row, f2)">Test 2</td>
   ...
</tr>

Внутри компонента

getColor(row: any, f: any): string {
    //I need to add a class based on some calculation
    this.setClass(f)
    return "aaa"; //set the aaa class
}

setClass(el: any) {
    setTimeout(() => {
         //remove the aaa class after 5 seconds
        //this.renderer.removeClass(el.nativeElement, 'aaa');
    }, 5000);
}

Проблема в том, что el.nativeElement является "неопределенным", я думаю, это потому, что тип el - HTMLElement вместо ElementRef.

Также я проверил некоторый похожий вопрос, такой как https://stackoverflow.com/a/48700662/1395614, но на самом деле проблема остается.

Answer 1

el уже является HTMLElement, поэтому вы должны передать el вместо el.nativeElement.

Кстати, nativeElement из ElementRef является экземпляром класса HTMLElement

Answer 2

Вы должны использовать пользовательскую директиву, указанную @Harun Yılmaz.Для повторного использования вашего кода и удаления ненужных сложностей из вашего компонента.

Вот пример: https://stackblitz.com/edit/angular-x6kbus

import { Directive, ElementRef, Renderer2, Input, OnInit } from '@angular/core';

@Directive({
  selector: '[changeClass]'
})
export class ChangeClassDirective implements OnInit {

  @Input('changeClass') changeClass: string;

  constructor(private renderer: Renderer2,
    private elementRef: ElementRef) {  }

  ngOnInit() {
    this.setAndRemoveClass(this.changeClass)
  }

  setAndRemoveClass(className: string) {
    this.renderer.addClass(this.elementRef.nativeElement, className);
    setTimeout(() => {
      //remove the aaa class after 5 seconds
      this.renderer.removeClass(this.elementRef.nativeElement, className);
    }, 5000);
  }
}

Используйте это так:

<p changeClass="test">
  Start editing to see some magic happen :)
</p>

Answer 3

Удалить класс из всех родственных элементов.

<li #li class="cat" *ngFor="let category of categories;">

component.ts

@ViewChildren('li') livs: QueryList<any>;

constructor(private elementRef: ElementRef) { }

sortNewsItems(event) {
    this.livs.forEach(liv => liv.nativeElement.children[0].classList = []);
}

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