Angular шаблон, проверьте, является ли элемент DOM указанным c ElementRef

Question

Я хотел бы проверить в шаблоне, является ли элемент в oop заданным значением c ElementRef

Например:

Контроллер:

@Component({selector: 'someCmp', templateUrl: 'someCmp.html'})
class SomeCmp implements AfterViewInit {
  @ViewChildren(el) elList: QueryList<ElementRef>;

  public element: ElementRef;

  ngAfterViewInit() {
    this.element = this.elList.toArray()[2];
  }
}

Шаблон:

<div #el *ngFor="[...]" [ngClass]="this === element ? 'highlight' : ''"></div>
<div #el *ngFor="[...]" [ngClass]="this === element ? 'highlight' : ''"></div>

Конечно, это не работает, "это" не ElementRef.

Есть ли способ обнаружить это?

Я не хочу проверять по индексу, потому что у меня может быть несколько циклов на стороне шаблона, как в моем примере

И, о, я использую Angular 8:)

Спасибо!

Answer 1

Для вашего случая идеальным решением было бы то, что вы можете определить имя класса для каждого div в вашем массиве *ngFor=[....], чтобы вы могли назвать его <div #el *ngFor="item of [...]" [ngClass]="item.className ? 'highlight' : ''"></div>

Если вы абсолютно хотите сравнить элемент, вы можете сделать это в TypeScript, а не в шаблоне. Как код удара.

  @ViewChildren('el', {read: ElementRef})
  ele: QueryList<ElementRef>

  constructor(
    private renderer: Renderer2
  ){}

  ngAfterViewInit() {
    /** A mock selectElement */
    const selectElement = this.ele.toArray()[2];

   /** Upate elements everytime elements get changed. */
    this.ele.changes.pipe(
      startWith(this.ele),
      map(elements => elements.toArray()),
    ).subscribe(elements => {
      elements.map((element: ElementRef) => {
        if (element === selectElement) {
          /** Modify elements */
          this.renderer.addClass(element.nativeElement, 'highlight');
        }
      })
    });
  }